It’s not rendering anything and I dont’ know why. CodeyOverflow Forum https://www.codecademy.com/courses/react-101/projects/codey-overflow-forum
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;type or paste code here
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;
Head.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 />);
commentData.js
export const comments = [
{
profileImg: 'https://images.unsplash.com/photo-1609992556706-14a7056ea745?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
username: 'ScrungeCat',
comment: 'My favorite types of cats are slightly weird looking ones!'
},
{
profileImg: 'https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
username: 'ChewToy',
comment: 'I don\'t like cats at all.'
},
{
profileImg: 'https://images.unsplash.com/photo-1563482776068-4dac10f9373d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
username: 'BuryHeadInSand',
comment: 'Wild ostriches make the best pets.'
}
]