CodeOverflow project issue

Web Development Front-End
,
1

Hello, I just completed the CodeyOverflow Project, but it does not render.
her is 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
  (
  <div>
  <img src={props.profileImg} />
  <h1>{props.username}</h1>
  </div>
  );
};
export default Header();

Body.js

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

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';

ReactDOM.createRoot(

document.getElementById('app')

).render(<App />);
2

Your export statements should be:

// You wrote:
export default App();
export default Card();
// and so on in the other files …

// It should be:
export default App;
export default Card;

Also in Card.js and Header.js, your return statements are incorrect:

// You wrote:
return
(

// It should be:
return (

The opening parenthesis must be on the same line as the return keyword. Otherwise, you will return immediately.

3

still not working after the fixes

4 
// You wrote:

comments.map(comment =>

<Card commentObject = {comment}/>;

);

// Try changing to:

comments.map(comment =>

<Card commentObject = {comment}/>

);
5

stil not working after that

6

What does your code look like after the edits? Can you post your latest code as you did in the original post?

8

Sure:

import React from 'react';

import {comments} from './commentData'

import Card from './Card'

function App() {

return (

comments.map(comment =>

<Card commentObject = {comment}/>

);

);

}

export default App;

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;

import React from 'react';
function Header(props) {
  return (
  <div>
  <img src={props.profileImg} />
  <h1>{props.username}</h1>
  </div>
  );
};
export default Header;

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

function Body(props) {

  return <p>{props.comment}</p>;

};
export default Body;

import React from 'react';

import {createRoot} from 'react-dom/client';

import App from './App';

ReactDOM.createRoot(

document.getElementById('app')

).render(<App />);

The problem is that nothing really appears. Just a blank white screen

9

Also, considering you are doing a named import, consider making the following change:

// You wrote:
ReactDOM.createRoot(

document.getElementById('app')

).render(<App />);


// Try changing to:
createRoot(

document.getElementById('app')

).render(<App />);
10

Still blank and white