CodeyOverflow Forum solution

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>
    </>
  )