Tyler Hudson-Crimi Tyler Hudson-Crimi - 2 months ago 6
React JSX Question

I receive an error when trying to pass a component/prop into a parent component

I'm new to react, so this is likely a beginner's error.

Here's my code that I'm working on: https://github.com/tylerehc/hrs/

It runs fine in that version--that is, the browser renders 'hello cow'.

However, when I try to use a second component and pass in a prop, I receive this error:

enter image description here

I am trying to pass in a prop by replacing

return(<div>hello cow</div>);


with

return(<ProfileHeader body='test' />);


ProfileHeader.js looks like this:

class ProfileHeader extends React.Component{
render() {
return (<div>{this.prop.body}</div>);
}
}


Any help would be greatly appreciated!

Answer

You have to rename this.prop to this.props

class ProfileHeader extends React.Component{
  render() {
    return (<div>{this.props.body}</div>);
  }
}

class Profile extends React.Component {
  render() {
    return(
      <div>
        hello cow
        <ProfileHeader body='hello' />
      </div>
    );
  }
}

ReactDOM.render(
  <Profile />, document.getElementById('profile')
)
Comments