text: Q:
  
  Pass a click Event from one class component to another in React
  
  I have two components. Here is the code for the first one, there are two buttons, exactly two radio buttons, for selecting age or name:
  class Radio extends Component {
    constructor(props) {
      super(props);
      this.state = {
        radioClick: "name",
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(event) {
      this.setState({
        radioClick: event.target.value, // THIS IS THE EVENT
      });
    }
  
    render() {
      return (
        <div className="radioButtons">
          <div className="left">
            <input
              type="radio"
              value="name"
              onChange={this.handleChange}
              checked={this.state.radioClick === "name"}
            />
            <label>&nbsp;&nbsp;Sort by name</label>
          </div>
          <div className="right">
            <input
              type="radio"
              value="age"
              onChange={this.handleChange}
              checked={this.state.radioClick === "age"}
            />
            <label>&nbsp;&nbsp;Sort by age</label>
          </div>
        </div>
      );
    }
  }
  
  export default Radio;
  
  this is the other one, a component which displays a table with all elements in array with a few methods for sort data by age or name:
  class Table extends Component {
    constructor(props) {
      super(props);
      this.value = "";
      this.people = [
        {
          name: "testing",
          birth: "00/00/0000",
        },
   
      ];
    }
  
    renderTableData = (value) => {
      value = this.value;
      let newArray = [...this.people];
  
      if ("age" === "age") {
        let arraySortAges = newArray.sort((a, b) => {
          return a.age + b.age;
        });
        return arraySortAges.map((person, index) => {
          const { name, birth } = person; //destructuring
          return (
            <tr key={name + "-" + birth}>
              <td>{name}</td>
              <td>{birth}</td>
            </tr>
          );
        });
      } else if ("name" === "") {
        let arrayNameSorted = newArray.sort((a, b) => {
          let fa = a.firstName.toLowerCase(),
            fb = b.firstName.toLowerCase();
  
          if (fa < fb) {
            return -1;
          }
          if (fa > fb) {
            return 1;
          }
          return 0;
        });
        return arrayNameSorted.map((person, index) => {
          const { name, birth } = person; //destructuring
          return (
            <tr key={name + "-" + birth}>
              <td>{name}</td>
              <td>{birth}</td>
            </tr>
          );
        });
      }
    };
  
    render() {
      return (
        <div className="table-div">
          <table className="table table-striped table-bordered table-hover full-width">
            <thead>
              <tr>
                <th className="course-name">Person Name</th>
                <th className="duration">Date of Birth</th>
              </tr>
            </thead>
            <tbody>{this.renderTableData()}</tbody>
          </table>
        </div>
      );
    }
  }
  
  export default Table;
  
  and they meet here in the parent component, App:
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }
  
    render() {
      return (
        <div className="container-fluid">
          <center>
            <h1>Birthday Records</h1>
          </center>
          <Radio  />
          <Table  />
        </div>
      );
    }
  }
  
  export default App;
  
  My question is how can I pass the event (//event in Radio Componente) to the table component?
  
  A:
  
  You can lift up the state and pass the handle function from App to Radio and Table
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        radioClick: "",
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange = (event) => {
      let word = event.target.value;
      this.setState({
        radioClick: word,
      });
    };
  
    render() {
      return (
        <div className="container-fluid">
          <center>
            <h1>Birthday Records</h1>
          </center>
          <Radio
            handleEventChange={this.handleChange}
            event={this.state.radioClick}
          />
          <Table event={this.state.radioClick} />
        </div>
      );
    }
  }
  
  export default App;
  
  Where the event is invoke
  class Radio extends Component {
    constructor(props) {
      super(props);
      this.state = {
        radioClick: this.props.event,
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange = (event) => {
      console.log(event.target.value);
      this.setState({
        radioClick: event.target.value,
      });
    };
  
    render() {
      return (
        <div className="radioButtons">
          <div className="left">
            <input
              type="radio"
              value="name"
              onClick={this.handleChange}
              onChange={this.props.handleEventChange}
              checked={this.state.radioClick === "name"}
            />
            <label>&nbsp;&nbsp;Sort by name</label>
          </div>
          <div className="right">
            <input
              type="radio"
              value="age"
              onClick={this.handleChange}
              onChange={this.props.handleEventChange}
              checked={this.state.radioClick === "age"}
            />
            <label>&nbsp;&nbsp;Sort by age</label>
          </div>
        </div>
      );
    }
  }
  
  