CodeyOverflow Forum Images not rendering

Language Help React.js
1

I’m currently in the CodeyOverflow Forum project. I completed all steps, but the images are not rendering.

I double checked with the project walkthrough video, and thought my code looked identical. I also went through a couple of the forum posts with similar issues, but still can’t find the issue with my code.

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 (
    <img src={props.profileImg}></img>
    <h1 username={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/>);
2
  • In App.js,
// You wrote:
return {
    comments.map( comment => <Card commentObject={comment} />)
  };

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

// OR change to:
return comments.map( comment => <Card commentObject={comment} />)
  • In Header.js,
// You wrote:
<h1 username={props.username}></h1>

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

Thank you for your reply - I tried both solutions to App.js and the solution to Header.js, but the images are still not rendering. Here is my updated code for 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;

and Header.js:

import React from 'react';

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

export default Header;

Please let me know if you see any other issues with my code!

4

In Header.js, you need to wrap the <img> and <h1> elements in either a <div> or a fragment <> (just like you did in Card.js). Only one outermost element is allowed. The parentheses after the return keyword does not constitute an outermost element.

// You wrote:
return (
    <img src={props.profileImg}></img>
    <h1>{props.username}</h1>
  );

// This will work (Fragment):
return (
    <>
        <img src={props.profileImg}></img>
        <h1>{props.username}</h1>
    </>
  );

// This will also work (div):
return (
    <div>
        <img src={props.profileImg}></img>
        <h1>{props.username}</h1>
    </div>
  );
5

Thank you so much, the images are now rendering!

6

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.