CodeyOverflow Forum Project not Rendering

Hi everyone! I’m struggling with the CodeyOverflow Forum project. I’ve scoured the forums and my code but in both cases I came up empty

App.js

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

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

default export 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 />);

Can anyone else see where I’m going wrong?

Check the return statement in App().

There should be curly braces around the javascript. You could also enclose that in a <div>

Does that make it render?

1 Like

Hi! I tried wrapping the javascript in curly braces and adding a <div> but its still not rendering

App.js now looks like this

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

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

default export App;

All looks fine to me! I even copied over your code, and it’s rendering here.

If you open DevTools - do you see any errors related to your React components?

1 Like

I don’t see any errors in DevTools. I wonder what’s going on if the code works for you but not for me

I’ve heard some people mention something like this happening in the Discord. I think you can safely mark all as complete and move on :+1:

In App.js, try changing:

// You wrote:
default export App;

// Try changing to:
export default App;

Does that make any difference?

As an aside, since the map method returns an array (instead of returning the Card component instances separately), so wrapping in div isn’t necessary. Both should work:

// This should work
return comments.map( comment => <Card commentObject={comment} />);

// This should also work
return (
    <div>
      {comments.map( comment => <Card commentObject={comment} />)}
    </div>
    );
2 Likes

TIL!!! Thanks for that.

1 Like

Thank you, that was my typo. Thanks for being a second (or third, I suppose) pair of eyes!

2 Likes