-1

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!

taylorhamcheese
  • 43
  • 1
  • 10

1 Answers1

0

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')
)
garmjs
  • 174
  • 1
  • 6
  • Is it possible to have more than one js file? Or does it have to all be in one? – taylorhamcheese Sep 10 '16 at 16:28
  • Is it possible, but better you must check webpack or browserify that lets you require('modules') in the browser by bundling up all of your dependencies. – garmjs Sep 12 '16 at 02:12