Mastering React Native

State

Occasionally, a component will need to keep track of some internal state in addition to the external, read-only, properties that are passed into it. State is necessarily internal to the component and, generally, exclusively tied to some visual display option (for instance, is the component visually expanded or collapsed).

Much in the same way that a component instance can access external properties via this.props, a component instance can access its internal state using this.state. Using internal state, we could optionally show parts of NewsItem only when that item is in an expanded state:

render() { let body = null; if (this.state.expanded) { body = ( <div> <Byline /> <Description /> </div> ); } return ( <div className="news-item" onClick={this.onClick} ...