Codey Overflow Forum - Stuck with rendering

Language Help React.js
1

Hi there! I am desperately trying to get this exercise to work but it seems I am doing something wrong? Even watching and typing alongside with the project video, the app simply does not render into my DOM. Can anyone help me out here? I’m stumped.

My code is the following:

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;

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;

Header.js:

import React from 'react'; function Header(props) { return( <img src={props.profileImg}></img> <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'; ReactDOM.createRoot(document.getElementById("app")).render(<App />);

Any help would be mega appreciated!

2

Check your components to make sure they have a single root tag. Card.js doesn’t have the same opening and closing tag - you could enclose the <header> and <Body> in a <div> or even a fragment: <> </>

1 Like
3

Hi Jameskeezer! Thank you for taking the time to reply.

Currently, using your feedback, have the following on 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;

However, still nothing is being displayed when i click ‘save’

4

Check Header.js as well. This may not be the complete solution, as I can’t run it and see the errors myself, but it’ll get you on your way to solving it.

1 Like
5

James seems to have spotted the major issue affecting functionality, but I thought I’d mention that you can destructure the props of your components to make your life a bit easier and type a bit less.

For example,

function Header(props) {
  return(
    <img src={props.profileImg}></img>
    <h1>{props.username}</h1>
  );
}

becomes

function Header({ profileImg, username }) {
  return(
    <img src={profileImg}></img>
    <h1>{username}</h1>
  );
}
2 Likes
6

Strange… I’m not receiving any errors just a white screen upon trying to save. Unfortunately, trying your solution did not help. I am going to reset the exercise and try again from scratch to see if i missed anything.

Edit: It worked! i can’t really see why, but trying again after resetting the exercise helped. Thanks a lot!

3 Likes
7

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.