Dynamically show values from one state to another in Reactjs

Question

I have four components named as UserHome, SearchFlight, Events and Alerts

I got UserHome component where I am importing all components

<SearchFlight/>
<Events />
<Alerts />

In SearchFlight I have a form with two inputs and a button. When I am clicking the button I am calling a function which will calculate some JSON values(events, alerts arrays) for the corresponding inputs I provided then I want to Inject these inputs dynamically in Events and Alerts component.

constructor() {
        super();
        this.state = {
            open: false,
            airport: '',
            search_flight_no: '',
        };

      }

handleSubmit= event =>{
        event.preventDefault();

        var airportValueSelected= this.state.airport;
        var flightValue= this.state.search_flight_no;
        var airportList= FlightInfo.Airport;
        for(var rootKey in airportList){
          if(rootKey===airportValueSelected)
           {

               airportList[rootKey].forEach(element => {


                   if(element.flight_no===flightValue){

                    for(var m=0;m<element.Events.length;m++){

                     var singleEvent={
                       event_name:'',
                       date_time:'',
                     };

                      singleEvent.event_name=element.Events[m].event_name;
                      singleEvent.date_time=element.Events[m].date_time;
                      this.state.events.push(singleEvent);
                    }

                    for(var s=0;s<element.Alerts.length;s++){

                      this.state.alerts.push(element.Alerts[s]["Alert"+(s+1)]);

                    }

                   }
                   // Here I am getting both events and alerts arrays
               });
               if(this.state.events.length<1 && this.state.alerts.length<1){
                this.setState({ open: true });
               }
               else{

               }


           }
        }

This code will get that events and alerts array so I have commented where I am getting it.

Rest here is my UserHome

 constructor() {
        super();
        this.state = {
            events:[],
            alerts:[],
        };

      }

      setEvents = newEvents => this.setState({events: newEvents})


    render(){
        const {events} = this.state
        return(
            <div >
                <div style={{display:'inline-block',minHeight:'470px',}}>  
                <div className="clearfix visible-xs"></div>
                <div className="container">
                    <SearchFlight events={events} setEvents={this.setEvents} />
                </div>
                <div className="clearfix visible-xs"></div>
                <button className="btn btn-primary" style={{position:'absolute',right:'0',top:'62px',}}>
                <Link to={{pathname: "/"}}>LOGOUT</Link></button>

                </div>




            </div>
        );
    }

Error: cannot read property of push undefined

Answer 1

Using the react philosophy, you should have UserHome have the global state and pass it to its children (the 3 other components). Also, UserHome should pass a function to SearchFlight when SearchFlight has the return of the submit.

This function will then update the state of UserHome, and allow its children to have the updated data.

Example:

class UserHome extends Component {
  state = {
    events: []
  }

  addEvent = newEvent => this.setState(state => {
    const {events} = this.state
    return [...events, newEvent]
  })

  render() {
    const {events} = this.state
    return (
      <>
        <SearchFlight events={events} addEvent={this.addEvent} />
        <Events events={events} />
        <Alerts events={events} />
      </>
    )
  }
}


class SearchFlight extends Component {
  handleSubmit = () => {
    const {addEvent} = this.props

    // create a new event here
    // const myNewEvent = {...}

    addEvent(myNewEvent)
  }
  render() {
    const {events} = this.props
    return (
      <button onClick={this.handleSubmit} />
    )
  }
}