Sending Component Props

Sending properties to a component entails adding HTML attribute like named values to the component when it is used, not when it is defined. For example, below the Badge component is define first. Then, to send a prop to the Badge component, name="Bill" is added to the component when it is used (i.e., when <Badge name="Bill" /> is rendered).

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

ReactDOM.render(<Badge name="Bill" />, document.getElementById('app'));


Keep in mind anywhere a component is used a property can be sent to it. For example, the code from the previous section demonstrates the use of the Badge component and name property from within the BadgeList component.

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

var BadgeList = React.createClass({
   render: function() {
       return (<div>
           <Badge name="Bill" />
           <Badge name="Tom" />
       </div>);
   }
});

ReactDOM.render(<BadgeList />, document.getElementById('app'));


Notes

• A components properties should be consider immutable and components should not alter internally the properties sent to them from above. If you need to alter the properties of a component then a re-render should occur, don't set props by adding/updating them using this.props.[PROP] = [NEW PROP].

‍