How to wire React components?

Question

JavaScript

Hello.
The site has two components, let's say a button and text, when you click on the button, the data array for the text should change. But the problem is that these components cannot be crammed into one and thus use setState. How to decide?
Thanks in advance!

Answer 1

Such tasks are easily solved through the parent:

class Parent extends Component {
  state = {
    text: 'some text',
  };

  handleClick = () => {
    this.setState({ text: 'some other text'});
  };

  render() {
    const { text } = this.state;

    return (
      <Wrapper>
        <Button onClick={this.handleClick} />
        <Text>{text}</Text>
      </Wrapper>
    );
  }
}

In a component structure, as in any other tree structure, it is physically impossible to arrange two components so that they are not in the same common parent. It is a fact.
If you are not using redux and the task is private, then passing a callback through a parent, and even through multiple components, can be a simple and effective solution.
Another thing is that in a more or less complex react application, it is good to use redux or analogues.