Как написать функцию так чтобы её можно было вызывать из нескольких компонентов?

Question

[Daniil]

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

import React, {useState , Component } from "react";
import "./myFunction.js" // здесь лежит функция
class Add extends React.Component {
  constructor() {
  super();
  this.state = {
    name: "Dasha",
  }
  }
  render () {
    return(
    <div onClick={this.myFunction()}>{this.state.name}</div>
    )
  }
}
export default Add;

Вот второй компонент

import React, { Component } from 'react';
import "./myFunction.js" // здесь лежит функция
class Child extends React.Component {
        constructor() {
        super();
        this.state = {
             name: "Masha",
         }
       }
  render () {
    return (
    <div onClick={this.myFunction()}>{this.state.name}</div>
    )
  }
}
}
export default Child ;

Вот файл где лежит функция

myFunction() {
      this.setState({name : "Daniil"}); 
      console.log(this.state.name);
    }

Comments

[Gary_Ihar]

Поднимите стейт выше по иерархии. Там же напишите вашу функцию. И передайте ее пропсами вниз в необходимые компоненты

Answer 1

[Gimir]

Нужно забайндить функцию, вот так

<div onClick={myFunction.bind(this)}>{this.state.name}</div>

Так ты будешь вызывать ее в контексте this класса компонента.
А вообще слушайте что Gary_Ihar говорит в комментах, так правильней будет.