Как изменить 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

[TRNER]

Данные из дочернего компонента в родительский можно передать посредством коллбэк функций, переданных через пропс. Пример

Comments

[Daniil]

Здравствуйте огромное спасибо за пример но здесь есть маленькая проблема второй компонент рендерится совсем в другом компоненте поэтому в первом компоненте не следа его не должно быть . Если методы не вызывать его в этом компоненте или вызывать но скрывать всё его содержимое. ?

[TRNER]

Daniil, В таком случае, если мы говорим о чистом реакте и не используем библиотеки а-ля редакс, данные обычно передаются через общего предка. Пример

[Daniil]

Огромное спасибо отметил решением.

[TRNER]

Daniil, Рад был помочь :)