CodeyOverflow Forum

Language Help React.js
1

I’ve done this project twice and did my best to copy the solution video and it still doesnt work.
Heres my code for each part:
App.js:

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

import Card from './Card';

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

export default App;

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;

Header.js:

import React from 'react';

function Header (props) {
  return (
    <div>
      <img 
      src = {props.profileImg}
      />
      <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/>);

Thanks for any help!!

2

  • In App.js, you wrote     commmentObject    instead of    commentObject

  • In Body.js, you wrote     </P>    instead of    </p>    
    Also since you are returning a single <p> element, so it is not necessary to wrap it in a fragment or <div>. You could just do     return <p>{props.comment}</p>    , but if you prefer to wrap it in a fragment or div, it is fine.

3

Thank you so much!! it was driving me crazy. I gotta be more careful lol

1 Like