Data and Props

Props this.props.whatever

Props is how you get data in.

this.props is an object, which can have any sort of data properties. In order to use the properties, you wrap them in { }. (In Angular it’s a duble curly brace, in React it’s just one)

1<div>Hello {this.props.name}</div>

this.props.children gets everything rendered inside a component

Setting default props

You can set default prop values. So even if the user doesn’t provide a prop value, it’ll have something to use. This is done using getDefaultProps() method

 1var Loading = React.createClass({
 2  getDefaultProps: function () {
 3    return {
 4      text: 'Loading'
 5    }
 6  },
 7  render: function () {
 8    ...
 9  }
10})

So if we had a Loading component that took in a loading text, we could make sure that if a text attribute isn’t provided to the component, this.props.text will by default be ‘Loading’.