O'Reilly logo

Mastering React by Ryan Vice, Adam Horton

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

props

So far our components have not been configurable. Clearly we would want to be able to define a component that can take arguments via the component's HTML element attributes. The following code shows how we can do this:

var HelloReact = React.createClass({
  render: function() {
    return (
      <div> 
        <div>Hello React</div>
        <div>{this.props.message}</div>
      </div>
      );
  }
});

ReactDOM.render(
  <HelloReact message='Message from props'/>, 
  document.getElementById('view'));

Note

Note that props are immutable and not dynamic. To change the value of a prop requires rerendering the component.

How it works

React components have props collections that will be populated from the component's HTML attributes that the component is declared with. So, in the following code, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required