CodeyOverflow Forum solution

Here is my solution to the codeyoverflow forum react project. Had been using ReactDOM all along. This is the first time I encountered createRoot.
Feedback is appreciated.

3 Likes

Thanks! This really helped me! :smiley:
Everything was correct, except that I forgot to wrap two elements in a div in header.js xD

I was kinda confused when the path changed from class components to function components :see_no_evil:

The .createRoot() was a nice touch!

This is my code. I am unable to get output on the screen. If anyone can make out, where did things go wrong?

In index.js, you wrote:

ReactDOM.createRoot(document.getElementById('app')).render(<APP/>);

It should be <App /> instead of <APP />

1 Like

Thank You Sir. I corrected, still unable to get the output.

I found two typos:

In App.js, import Card from './Cards'; should be import Card from './Card';

In Body.js: import comments from './commentData'; should be import { comments } from './commentData'; — HOWEVER you can delete this line because it is not necessary. The comments are not called by the component. The comment is passed as a prop. It’s also not required in Header.js

If there are any more typos, the output may still be blocked. For myself, I had to create a new React project locally in VSCode to find all my bugs and fix them.

2 Likes

jameskeezer has pointed out a couple of issues.

As pointed out by him,

import Card from './Cards';

isn’t correct because the filename is Card.js

Also in App.js,

// You wrote:
return (comments.map(comment => <card commentObject={comment} />))

// It should be:
return (comments.map(comment => <Card commentObject={comment} />))

In Header.js,

//
// You wrote:
<h1>{props.userName}</h1>

// It should be:
<h1>{props.username}</h1>
1 Like

Hello, I’m trying to implement the project here, but it doesn’t show anything.

Here is the code:
In App.js:

import React from 'react';
import {comments} from './commentData'
import {Card} from './Card'

export function App{
  return
    (comments.map(comment => <Card commentObject={comment} />));
}

In Card.js:

import React from 'react';
import {Header} from './Header';
import {Body} from './Body';

export function Card(props){
  return (
    <div>
      <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username} />
      <Body comment={props.commentObject.comment} />
    </div>
  )
}

In Header.js:

import React from 'react';

export function Header(props){
    return (
      <div>
        <img src={props.profileImg} />
        <h1>{props.username}</h1>
      </div>
    )
}



In Body.js:

import React from 'react';

export function Body(props){
  return <p>{props.comment}</p>
}

In index.js:

import React from 'react';
import {createRoot} from 'react-dom/client';
import {App} from './App';

createRoot(
  document.getElementById('app')
).render(<App />);

The only difference I noticed with the working code above is the import module. But if it’s the case, I don’t know why it should be the problem. Hope you guys can figure out what it is and help me fix the code.

Thank you very much!

In App.js, you wrote:

return
    (comments.map(comment => <Card commentObject={comment} />));

When you have the return statement like this

return
(

then the compiler has no way of knowing that this is supposed to be a single statement. It will see the return keyword and immediately exit the method/function ignoring whatever is present within the parentheses.
If you put the opening parenthesis on the same line

return (

then the compiler knows that the intent is to return whatever is between the opening and closing parentheses. Whatever is in between the parentheses doesn’t need to be on the same line, and can be spread over multiple lines:

return (
    comments.map(
    comment => <Card commentObject={comment} />)
)
1 Like

Hello. Thank you for the swift response!

Is there any remark you have on the code? I fixed the break-line in the return statement, but the problem persists.

Thank You. Still not working.

In Header.js,

// You wrote:
<img src=props.profileImg  alt=''/>

// It should be:
<img src={props.profileImg}  alt=''/>

In App.js,

// You wrote:
export function App{

// Change it to:
export function App() {
1 Like

I feel like I’m having similar issues. I can’t get anything to render in the browser. I’ve reviewed all of the posted code here and I feel like mine matches up and yet I still get no results. Could there be an issue that’s popped up since Codecademy updated it’s React content, or am I just missing something in my code?

Ok, nvm. Found it. One single typo. Like a needle in a haystack. :rofl:

1 Like

Great, now it’s working. Thank you very much!

This code is working in my local environment (React 18.2). Only the index.js was modified from the 18.2 version.
Renders nothing in the Codecademy browser. I have this error in the their console:

Fail cdn.segment.com/analytics.js/v1/3YgquPWvCef9DxDzbV4DuNtAtBH9JLhQ/analytics.min.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Index.js

import React from "react";
import { createRoot } from "react-dom/client";
import './index.css';
import App from "./App";

createRoot(document.getElementById("app")).render(<App />);

App.js

import React from "react";
import { comments } from './commentData';
import Card from './Card'

const App = () => {

return (
  comments.map((comment, index) => <Card key={index} commentObj={comment} />)
)
}

export default App;

Card.js

import React from "react";
import Header from "./Header";
import Header from "./Header";
import Body from "./Body";

const Card = (props) => {
  const profileImg = props.commentObj.profileImg;
  const username = props.commentObj.username;
  const comment = props.commentObj.comment;

  return (
    <div >
      <Header profileImg={profileImg} username={username} />

      <Body comment={comment} />
    </div>
  );
};

export default Card;


Header.js

import React from "react";

function Header (props) {
  const profileImg = props.profileImg
  const username = props.username

  return (
    <div>
    <img src={profileImg} alt=''/>
    <h1>{username}</h1>
    </div>
  )
}

export default Header

Body.js

import React from "react";

const Body = function (props) {
  const comment = props.comment
  return <p>{comment}</p>;
};

export default Body;

You are importing index.css. Does this file exist in your folder? On my project I see the project uses style.css. And I don’t have to import it in index.js because it is already linked to index.html

Perhaps it may be related to Adblock or some other browser extension.

@mtrtmk,

Thanks for the reply. That error is in the console at Codecademy, not my machine. The app looks great in my local browser.

Today I am getting these errors in the CC console:

act-dom.production.min.js:320 Uncaught Error: Minified React error #268; visit https://reactjs.org/docs/error-decoder.html?invariant=268&args[]=%24%24typeof%2Ctype%2Ckey%2Cref%2Cprops%2C_owner for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at i.findDOMNode (react-dom.production.min.js:320:207)
at index.tsx:103:18
at invokeFunc (debounce.js:95:19)
at leadingEdge (debounce.js:105:22)
at debounced (debounce.js:172:16)
i.findDOMNode @ react-dom.production.min.js:320
(anonymous) @ index.tsx:103
invokeFunc @ debounce.js:95
leadingEdge @ debounce.js:105
debounced @ debounce.js:172
react-dom.production.min.js:320 Uncaught Error: Minified React error #268; visit https://reactjs.org/docs/error-decoder.html?invariant=268&args[]=%24%24typeof%2Ctype%2Ckey%2Cref%2Cprops%2C_owner for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at i.findDOMNode (react-dom.production.min.js:320:207)
at index.tsx:103:18
at invokeFunc (debounce.js:95:19)
at trailingEdge (debounce.js:144:14)
at timerExpired (debounce.js:132:14)
i.findDOMNode @ react-dom.production.min.js:320
(anonymous) @ index.tsx:103
invokeFunc @ debounce.js:95
trailingEdge @ debounce.js:144
timerExpired @ debounce.js:132
setTimeout (async)
leadingEdge @ debounce.js:103
debounced @ debounce.js:172
react-dom.production.min.js:320 Uncaught Error: Minified React error #268; visit https://reactjs.org/docs/error-decoder.html?invariant=268&args[]=%24%24typeof%2Ctype%2Ckey%2Cref%2Cprops%2C_owner for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at i.findDOMNode (react-dom.production.min.js:320:207)
at index.tsx:103:18
at invokeFunc (debounce.js:95:19)
at trailingEdge (debounce.js:144:14)
at timerExpired (debounce.js:132:14)
i.findDOMNode @ react-dom.production.min.js:320
(anonymous) @ index.tsx:103
invokeFunc @ debounce.js:95
trailingEdge @ debounce.js:144
timerExpired @ debounce.js:132
setTimeout (async)
debounced @ debounce.js:182
2react-dom.production.min.js:320 Uncaught Error: Minified React error #268; visit https://reactjs.org/docs/error-decoder.html?invariant=268&args[]=%24%24typeof%2Ctype%2Ckey%2Cref%2Cprops%2C_owner for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at i.findDOMNode (react-dom.production.min.js:320:207)
at index.tsx:103:18
at invokeFunc (debounce.js:95:19)
at leadingEdge (debounce.js:105:22)
at debounced (debounce.js:172:16)
i