Tyler Hudson-Crimi Tyler Hudson-Crimi - 1 year ago 65
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>);


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 Source

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() {
        hello cow
        <ProfileHeader body='hello' />

  <Profile />, document.getElementById('profile')
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download