如何在反应类之间共享数据？

Question

How can I share the data value that I have from the handleClick function inside the Module class to the InputSelect class, all the classes are in the same file?? I'm not using Redux. I can't use props because there is not a relationship between these classes.. Should I nest all the classes??

Any suggestion??

import React, { useState } from "react";

const array = [ ];
class InputSelect extends React.Component {

  render() {
      return (
       <div> 
        { 'Put it here........' }
        </div>
       )
    }
}

class Module extends React.Component {

  handleClick(e) {
    console.log(e.currentTarget.textContent);
  }

  render() {
    return (
      <div
        onClick={this.handleClick}
      >
        {this.props.id}
      </div>
    );
  }
}

function App() {
  return (
      <div>
        <Menu availableModules={array} />
      </div>
  );
}

export default App;

Answer 1

Correctly stated by @Federkun above, you should use React context. Check the react docs here