How to bind two child components in react js?

Question

React

There are two child components with one parent, how to connect them so that when one child component is activated (for example, pressing a button), the second child component (for example, text) changes?

Answer 1

class Parent extends Component {

  constructor() {
    super();
    this.state = {
      text: ''
    };
  }

  // Ссылку на этот метод будем передавать в Button компонент.
  buttonClick() {
    this.setState({ text: Date.now() });
  }
  
  render() {
    return (
      <div>
        // Ну, а тут передаем состояние text (родительского компонента) через props в дочерний (Text)
        <Text text={ this.state.text } />
        <Button onClick={ () => this.buttonClick() }/>
      </div>
    );
  }
}

function Button(props) {
  return <button onClick={ props.onClick }>Click me</button>
}

function Text(props) {
  return <span>{ props.text }</span>
}