Reaction state

How to interact with component state

Set the default state

In the component constructor, initializethis.state. For example, the BlogPostExcerpt component may have aclickedstatus:

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }

render() { return ( <div> <h1>Title</h1> <p>Description</p> </div> ) } }

Access status

ThisClickedStatus can be accessed by referencethis.state.clicked:

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }

render() { return ( <div> <h1>Title</h1> <p>Description</p> <p>Clicked: {this.state.clicked}</p> </div> ) } }

Change state

Never use it to change the state

this.state.clicked = true

Instead, you should always usesetState()Instead, pass it an object:

this.setState({ clicked: true })

Objects can contain subsets or supersets of states. Only the attributes you pass will be mutated, and the omitted attributes will retain their current state.

Why you should always usesetState()

The reason is that with this method, React knows that the state has changed. Then, it will start a series of events that will cause the component to be re-rendered and any other events.DOMUpdate.

One-way data flow

The state is always owned by a component. Any data affected by this state can only affect the components under it: its subcomponents.

Changing the state on a component will never affect its parent, its siblings, or any other components in the application: only its children.

This is why the state usually moves up in the "component" tree.

Move up the tree state

Due to the one-way data flow rule, if two components need to share state, they need to move the state up to a common ancestor.

In many cases, the closest ancestor is the best place to manage the country, but this is not a mandatory rule.

The state is passed to the component that needs the value through props:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }

render() { return ( <div> <Display currency={this.state.currency} /> <CurrencySwitcher currency={this.state.currency} /> </div> ) } }

Sub-components can change the state by passing down the mutating function as a prop:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }

handleChangeCurrency = event => { this.setState({ currency: this.state.currency === ‘€’ ? ‘$’ : ‘€’ }) }

render() { return ( <div> <Display currency={this.state.currency} /> <CurrencySwitcher currency={this.state.currency} handleChangeCurrency={this.handleChangeCurrency} /> </div> ) } }

const CurrencySwitcher = props => { return ( <button onClick={props.handleChangeCurrency}> Current currency is {props.currency}. Change it! </button> ) }

const Display = props => { return <p>Current currency is {props.currency}.</p> }

Download mine for freeResponse Handbook


More response tutorials: