CodeyOverflow Forum solution

Language Help React.js
,
47

Can you re-paste your code properly formatted? You can do this by clicking the gear icon and then “</> preformatted text” in the comment editor or just wrapping your code in three back-ticks on either side.

1 Like
48

Hey! It wasn’t rendering in code academy’s website but I was able to render it in my code editor. Thank you!

1 Like
49

Can anyone help me figure out why my code won’t show anything in the browser? I understand all the concepts, but nothing is working. I copied the instructor’s Youtube video code for code but it’s still not working? Huh?

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} />
    <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/>);
50

Consider making the following three changes:

  • Issue #1: In App.js, remove the <div> and curly braces. The map method will return an array of <Card> component instances, instead of separate component instances, so the <div> isn’t necessary.
// This should work:
return comments.map(comment => <Card commentObject={comment} />)

// This should also work:
return (
    comments.map(comment => <Card commentObject={comment} />)
)
  • Issue #2: In Card.js, you need to wrap the <Header> and <Body> components in either a <div> or a fragment <>. (See this post for more details about why fragments or one outermost element should be used). The parentheses after the return keyword does not constitute an outermost element.
// This will work (Fragment)
return (
    <>
      <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username}/>
      <Body comment={props.commentObject.comment} />
    </>
  )

// This will also work (div)
return (
    <div>
      <Header profileImg={props.commentObject.profileImg} username={props.commentObject.username}/>
      <Body comment={props.commentObject.comment} />
    </div>
  )
  • Issue #3: In Header.js, similar issue to the above.
// Use either a fragment or a div as the outermost element
return (
    <>
      <img src={props.profileImg} />
      <h1>{props.username}</h1>
    </>
  )
51

Ah, I understand now, thank you so so much, you’ve made things much clearer. Thank you!

1 Like
52

sir, If You can please have a look and figure out, why it’s unable to display the output.

53

In App.js,

// You wrote:
return (
comments.map (comment => <card commentObject = {comment}/>)
  )

// Change it to:
return (
comments.map (comment => <Card commentObject = {comment}/>)
  )
54

Thank You, Sir. It’s working. At times, it difficult to figure out, own mistakes.