CodeyOverflow Forum solution

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.

1 Like

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

1 Like

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/>);

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>
    </>
  )

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

1 Like

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

In App.js,

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

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

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

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

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.

1 Like

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.

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

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

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.

Hello,

I’ve gone through the unstuck video twice and painstakingly followed along. It won’t display anything in the browser. I feel like I understand the concepts here, but it sure would be nice to see it work.

Also, in the video, he wraps a lot of return content in empty tags (<> … </>) can someone explain this?

If someone could point out where the syntax foible is I would be most thankful!

//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;
//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> ) } export default Card;
//Header.js import React from 'react'; function Header(props) { return ( <div> <img src={props.profileImg}></img> <h1>{props.username}</h1> </div> ) } 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/>);
  • In App.js,
// You wrote:
comments.map(comment=> <Card commentObject={comment}) />

// It should be:
comments.map(comment => <Card commentObject={comment} />)
  • In Card.js, it should be props.commentObject.username (have a look at the properties of the objects in the commentData.js file)
// You wrote:
<Header profileImg = {props.commentObject.profileImg} 
                       username={props.commentObject.userName}/>

// It should be:
<Header profileImg = {props.commentObject.profileImg} 
                       username={props.commentObject.username}/>

Haven’t watched the video. But. revisit the earlier lesson JSX Outer Elements .

…a JSX expression must have exactly one outermost element…

Only one outer element is allowed, so we can wrap them in say a <div> ... </div>, but if we don’t want to add extra nodes to the DOM by creating divs, we can instead wrap the elements in a fragment. This allows us to have only one outer element without unnecessarily cluttering the DOM.

Have a look at the documentation (it is a relatively short read):

The <></> is shorthand for <Fragment></Fragment>

The parentheses after the return keyword doesn’t count as a single outer element (see this post). Instead, we can use <div> or <Fragment> or some other element (as long as there is ONLY ONE outermost element).

1 Like

I’m somewhat chagrined to disclose this, but somehow I got on a different career track and was working in “Web Development” instead of “Full Stack”, now that I’ve straightened that out I am seeing the lessons that clear up my syntax questions.

Hello, I made the changes and redid the assignment from scratch. It still will not display anything. This is my code:

//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 />)

In Card.js,

// You wrote:
import Body from './body';

// It should be:
import Body from './Body';

because the correct filename is Body.js

Oof, thank you! I knew it had to be something syntax-y. I’ll give it a try in my next study block and hopefully that will do the trick.

1 Like

I had made the SAME mistake. THANK YOU! :smile: