Constent rendering issues in all my projects

Hi all, react beginner here and i am getting a bit frustrated… I am building a project for a comment section of forum and can’t get anything to render. i have had this issue before so if you can help me solve it, it would help complete several projects and honestly take the pressure of using react. I think it is how I am using createRoot() and possibly not fully understanding it. here is my code below.

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 (
comments.map(comment =>

))
};

export default App;

Card.js

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

function Card(props) {
return (


)
};

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

commentData.js

export const comments = [
{
profileImg: ‘https://images.unsplash/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://
username: ‘ChewToy’,
comment: ‘I don't like cats at all.’
},
{
profileImg: ‘https://’,
comment: ‘Wild ostriches make the best pets.’
}
]

Hi! I see this has been open for almost a year with no reply, shocking. The help on here is terrible! Im on the Full Stack course, recently started the React module. EVERY single one of my projects doesnt render properly, even when i reset and follow the walk through word for word! So frustrating, feel like giving up. Absolutely no help offered anywhere i look, no replies to any queries iv raised or comments iv posted. I hope you eventually got sorted and are working in a nice coding job somwhere earning good money…tis only a dream for me at the moment!

The React II module has been pretty sobering and humbling for me.
After general smooth sailing for the first third of the overall course, things have ground to a near halt and made me have a complete rethink about how to go about it and the timescale. Also going to try to double up on the stuff I can do comfortably with free courses elsewhere where I’ll at least get some bits of paper (digital of course) to show for my modest abilities and similar work.

With one project, I was struggling even to render a simple h2 element to test the rendering was working and felt pretty disheartened and wiped out at not being able to see it, pretty much out for the count, and the problem ended up being I was trying to view it like a normal website by loading the index.html file in the browser instead of using npm start in the terminal. Doubt that’ll be the same issue as Ahmoody’s but who knows.

Wondering if his App component needs a JSX list item element after the =>. Not sure.

Good luck anyway digitalpunk79, hope things pick up. I’d offer to help but don’t think I’d be much use. Another forum post mentioned a Discord group with people offering useful pointers so might be an option.

Thanks for the reply! Yeah, React kida sucks a bit😂 I struggled quite a bit with some of the intermediate JavaScript aswell, now React has me wondering if this really is what im supposed t be doing because i really dont feel like i get it!