How to change state in all React component instances?

Question

React

Just started learning React. There is a button component and there can be many such buttons on the page. How, when clicking on any of the buttons, change the state in all instances of this component? this.setState only works on the button that was clicked

Answer 1

To do this, each instance needs to pass a reference to one value

class Buttons extends Component {
  state = {
    foo: 'bar'
  }

  changeText = () => {
    if (this.state.foo === 'bar') {
      this.setState({ foo: 'foo' })
    } else {
      this.setState({ foo: 'bar' })
    }
  }     

  render() {
    return (
      <Button text={this.foo} />
      <Button text={this.foo} />
      <Button text={this.foo} />
      <Button text={'Изменить текст'} onClick={this.changeText} />
    )
  }
}

The example is stupid, but the principle illustrates.