One of React's biggest strengths is that it's easy to track the flow of data through your React components. When you look at a component, you can easily see exactly which props are being passed in which makes your apps easy to reason about. Occasionally, you want to pass data through the component tree without having to pass the props down manually at every level. React's "context" feature lets you do this. Context is an advanced and experimental feature. The API is likely to change in future

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet. Our design philosophy is that it should be “easy” to make things safe, and developers should explicitly state their intent when performing “unsafe” operations. The prop name dangerouslySetInnerHTML is intentionally chosen to be frightening, and the

Updating: componentWillUpdate void componentWillUpdate( object nextProps, object nextState ) Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render. Use this as an opportunity to perform preparation before an update occurs. You cannot use this.setState() in this method. If you need to update state in response to a prop change, use componentWillReceiveProps instead.

Unmounting: componentWillUnmount void componentWillUnmount() Invoked immediately before a component is unmounted from the DOM. Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.

componentWillReceiveProps isn't triggered after the node is put on scene. This is by design. Check out other lifecycle methods for the one that suits your needs. The reason for that is because componentWillReceiveProps often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does.

Updating: componentWillReceiveProps void componentWillReceiveProps( object nextProps ) Invoked when a component is receiving new props. This method is not called for the initial render. Use this as an opportunity to react to a prop transition before render() is called by updating the state using this.setState(). The old props can be accessed via this.props. Calling this.setState() within this function will not trigger an additional render. componentWillReceiveProps: function(nextProps) {

Mounting: componentWillMount void componentWillMount() Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

Mounting: componentDidMount void componentDidMount() Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components. If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requ

Updating: componentDidUpdate void componentDidUpdate( object prevProps, object prevState ) Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated.

For parent-child communication, simply pass props. For child-parent communication: Say your GroceryList component has a list of items generated through an array. When a list item is clicked, you want to display its name: var handleClick = function(i, props) { console.log('You clicked: ' + props.items[i]); } function GroceryList(props) { return ( <div> {props.items.map(function(item, i) { return ( <div onClick={handleClick.bind(this, i, props)} key={i}