CodeyOverflow Forum solution

chip2027941712 · April 26, 2023, 10:47pm

can someone help me figure out why my code is not working? It was not rendering anything in the Codecademy browser so I tried to use my personal device and it’s still not rendering anything. It’s not throwing any errors but I can’t find my mistake. Here is the link to the code on my GitHub: codeyOverflow
Thanks in advance!

mtrtmk · April 27, 2023, 1:33am

In index.js,

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

// Try changing to:
createRoot(document.getElementById("app")).render(<App/>);

csssurfer26614 · April 30, 2023, 9:25am

Hey! Could you please help me when the code?
I don’t have any error messages in the console, but the code is not running.
I have also noticed that most of you guys are using functions to create components, but I’ve been using classes as in some earlier lessons – am I missing something here? (took a long break from course and this is my first project coming back)

gist.github.com

https://gist.github.com/codecademydev/1c3cebb006d06773bc20c5cb4a32d181

App.js

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


class App extends React.component {
  constructor(props);
  render() {
    return (
      comments.map(comment =>

This file has been truncated. show original

Body.js

import React from 'react';

class Body extends React.component {
  constructor(props);
  render() {
    return (
      <p>{props.comment}</p>
      )
  }
}

This file has been truncated. show original

Card.js

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

class Card extends React.component {
  constructor(props);
  render() {
    return (
      <div>
      <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username} />

This file has been truncated. show original

There are more than three files. show original

brianawotwi · May 1, 2023, 5:48pm

I did everything right but nothing was rendering on Codecademy’s browser. However, when I transferred the code to my own machine I was able to render in my own browser.

raissanfg7844455638 · May 10, 2023, 5:02pm

I’m not sure what is wrong with my code, can someone maybe help me understand where there’s an error?

App/js
import React from ‘react’;
import {comments} from ‘./commentData’
import Card from ‘./Card’;

function App() {
return (
comments.map(comment =>
)
}

export default App;

Card.js

import React from ‘react’;
import Header from “./Header”;
import Body from ‘./Body’;

function Card(props) {
return (

  <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username} />
  <Body comment={props.commentObject.comment} />

);
}

export default Card;

header.js
import React from ‘react’;

function Header(props) {
return (

{props.username}

);
}

export default Header;

Body.js
import React from ‘react’;

function Body(props) {
return (

{props.comment}

);
}

export default Body;

index.js
import React from ‘react’;
import {createRoot} from ‘react-dom/client’;
import App from ‘./App’;

createRoot(
document.getElementById(‘app’)
).render()

mtrtmk · May 10, 2023, 5:14pm

To preserve code formatting in forum posts, see: [How to] Format code in posts

ajax5746386627 · May 14, 2023, 3:46pm

Can someone please check what’s wrong in my code. It doesn’t render anything

import React from ‘react’;
import {comments} from ‘./commentData’;

import Card from ‘./Card’;

function App () {
return (
comments.map(comment => )
)
}
export default App;

import React from ‘react’;
import Header from ‘./Header’;
import Body from ‘./Body’;

function Card (props) {
return (

)
}
export default Card;

import React from ‘react’;

function Header (props) {
return (

{props.username}

)
}

export default Header;

import React from ‘react’;

function Body (props) {

return

{props.comment}

}

export default Body;

import React from ‘react’;

import {createRoot} from ‘react-dom/client’;

import App from ‘./App’;

createRoot(document.getElementById(‘app’)).render();

net5533575016 · May 15, 2023, 5:46pm

Can you re-paste your code properly formatted? You can do this by clicking the gear icon and then “</> preformatted text” in the comment editor or just wrapping your code in three back-ticks on either side.

ajax5746386627 · May 21, 2023, 3:16pm

Hey! It wasn’t rendering in code academy’s website but I was able to render it in my code editor. Thank you!

makathegreat · May 27, 2023, 12:29am

Can anyone help me figure out why my code won’t show anything in the browser? I understand all the concepts, but nothing is working. I copied the instructor’s Youtube video code for code but it’s still not working? Huh?

App.js

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

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

export default App;

Card.js

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

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

export default Card;

Header.js

import React from 'react';

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

export default Header;

Body.js

import React from 'react';

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

export default Body;

Index.js

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


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

mtrtmk · May 27, 2023, 1:57am

Consider making the following three changes:

Issue #1: In App.js, remove the <div> and curly braces. The map method will return an array of <Card> component instances, instead of separate component instances, so the <div> isn’t necessary.

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

// This should also work:
return (
    comments.map(comment => <Card commentObject={comment} />)
)

Issue #2: In Card.js, you need to wrap the <Header> and <Body> components in either a <div> or a fragment <>. (See this post for more details about why fragments or one outermost element should be used). The parentheses after the return keyword does not constitute an outermost element.

// This will work (Fragment)
return (
    <>
      <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username}/>
      <Body comment={props.commentObject.comment} />
    </>
  )

// This will also work (div)
return (
    <div>
      <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username}/>
      <Body comment={props.commentObject.comment} />
    </div>
  )

Issue #3: In Header.js, similar issue to the above.

// Use either a fragment or a div as the outermost element
return (
    <>
      <img src={props.profileImg} />
      <h1>{props.username}</h1>
    </>
  )

makathegreat · May 27, 2023, 4:34pm

Ah, I understand now, thank you so so much, you’ve made things much clearer. Thank you!

digital1027857488 · May 30, 2023, 10:30am

sir, If You can please have a look and figure out, why it’s unable to display the output.

gist.github.com

https://gist.github.com/codecademydev/8f140670ff4b478e5cb633affd0a98f0

App.js

import React from 'react';
import {comments} from './commentData';
import Card from './Card';
function App() {
  return (
comments.map (comment => <card commentObject = {comment}/>)
  )
}
export default App;

Body.js

import React from 'react';
function Body(props){
  return (<p>{props.comment}</p>)
} 
export default Body;

Card.js

import React from 'react';
import Header from './Header';
import Body from './Body';
function Card (props){
  return (
    <div>
    <Header profileImg = {props.commentObject.profileImg} username = {props.commentObject.username}/>
    <Body comment = {props.commentObject.comment} />
    </div>
  )

This file has been truncated. show original

There are more than three files. show original

mtrtmk · May 30, 2023, 1:27pm

In App.js,

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

// Change it to:
return (
comments.map (comment => <Card commentObject = {comment}/>)
  )

digital1027857488 · May 30, 2023, 3:22pm

Thank You, Sir. It’s working. At times, it difficult to figure out, own mistakes.

system5200873373 · August 24, 2023, 7:17pm

can someone explain the App component, particularly the usage of .map()

mtrtmk · August 25, 2023, 2:47am

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

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

export default App;

In App.js, we have import statements at the top.

In the file Card.js, the Card component has been exported through a default export. Hence we use the import statement,

import Card from './Card';

In the file commentData.js, the comments array has not been exported through a default export. Instead, a named export has been used. Therefore, the import statement is slightly different (note the curly braces),

import {comments} from './commentData'

See the documentation for more on named and default exports: export - JavaScript | MDN
Similarly, you can browse the documentation for more on imports.

See documentation for map method: Array.prototype.map() - JavaScript | MDN

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

The comments array we have imported from commentData.js is an array of objects (Each object has three properties. If you have accidentally closed the file, you can re-open it by clicking the Folder icon in the top left corner of the editor in the exercise).

We are using the map method on the imported comments array and passing an arrow function to the map method. In each iteration, an element from the comments array will be passed as an argument to the arrow function. The body of the arrow function will be executed and the result of the arrow function will be pushed to a new array. It is our choice what name we want to use as the parameter of the arrow function. If we wanted, instead of comment, we could have used element or some other name of our choice as the parameter.
We could do:

comments.map(element => <Card commentObject={element} />)

In each iteration of the map, an element (in our case an object from the comments array) will be passed as an argument to the arrow function. The argument will be assigned to the parameter. Within the body of the arrow function, an instance of the Card component will be created. We are passing the whole object we are iterating over as the value for a prop named commentObject. (Later, within the file Card.js, we will use the syntax props.commentObject to access this object). The instance of Card component will be pushed to a new array. After the map method has iterated over all the elements of the comments array, the new array will have been populated by instances of Card components. This array will then be returned by the App component.

basmong · September 7, 2023, 8:50am

Has anyone else had such a problem? Everything is displayed except the pictures.
The code seems to be fine, I compared it with what others posted.

GitHub link: Codecademy export · GitHub

Header.js

import React from 'react';

function Header(props){
  return (
    <div>
      <img scr={props.profileImg} alt='picture'/>
      <h1>{props.username}</h1>
    </div>
  )
}

export default Header;

Card.js

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

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

export default Card;

App.js

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

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

export default App;

Links to images work if manually copied and used in the browser.

mtrtmk · September 7, 2023, 9:50am

// You wrote:
<img scr={props.profileImg} alt='picture'/>

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

basmong · September 7, 2023, 10:14am

Thank you very much.
I even moved the entire project to Visual Studio, but even there the editor did not underline “scr” as incorrect code.