Pass a click Event from one class component to another in React

Question

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?

Answer 1

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>
    );
  }
}