CodeyOverflow Solution Help

Here is my solution to the problem but I cant seem to find the error thats not rendering the images

App.js

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


function App (props) {
  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() {
  return (
    <>
      <Header profileImg={props.commentObeject.profileImg} username={props.commentObject.username}/>
      <Body comment={props.commentObject.comment}/>
    </>
  )
}


export default Card

Header.js

import React from 'react'


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


export default Header

Body.js

import React from 'react'


function Body() {
  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/>)
  • In Card.js, you wrote commentObeject instead of commentObject.

  • Also, in Card.js and Header.js and Body.js, you wrote:

// You wrote:
function Card() {
// and 
function Header() {
// and
function Body() {
// It should be:
function Card(props) {
// and 
function Header(props) {
// and
function Body(props) {

Within these components, you are making use of props and expect the props object to be passed to these components.

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