Как изменить state первого компонента из второго компонента если они не имеют общего предка и не рендерелись друг в друга ??

Question

[Daniil]

Мне нужно чтобы при вызове функции из второго компонента в первом менялись значения в state при этом они не имеют общего предка и рендерятся в разных компонентах а не в друг друга. Наглядно покажите как это сделать пожалуйста на этом примере.
Вот первый компонент:

import React, {useState , Component } from "react";
import Child from "./other.js" ;
class Add extends React.Component {
  constructor() {
  super();
  this.state = {
    name: "Dasha",
  }
  }

  render () {
    return(
    <div onClick={this.myFunction.bind()}>{this.state.name}</div>
    )
  }
}
export default Add;

Вот второй

import React, { Component } from 'react';
class Child extends React.Component {
  constructor() {
    this.myFunction = this.myFunction.bind(this);
    }
    myFunction() {
      this.setState({name : "Daniil"}); 
      console.log(this.state.name);
    }
}
export default Child ;

Answer 1

[cython]

Никак, функциональный подход такого не предполагает. Если вам нужны общие состояния, то используйте Redux или подобные библиотеки.

Answer 2

[Mikhail Osher]

React Context API