title: Empty the state of parent component from button in child component
body: <p>I want to clear the state of child from previous state after I click a button again from child component.</p>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>   constructor() {
              super();
              this.state = {
                  events:[],
                  alerts:[],
              };
  
            }
  
  
  addEvent = newEvent =&gt; this.setState(state =&gt; {
      const {events} = state
      return { events: [...events, ...newEvent]}
    });
  
    addAlert = newAlert =&gt; this.setState(state =&gt;{
      const {alerts} = state
      return {alerts: [...alerts, ...newAlert]
    });
  
   render(){
  
      const {events} = this.state
              const {alerts} = this.state
              console.log(alerts);
              return(
                  &lt;div &gt;
                      &lt;SearchFlight events={events} alerts={alerts} addAlert={this.addAlert} addEvent={this.addEvent} /&gt;
  
                          &lt;Events events={events}/&gt;
                          &lt;Alerts alerts={alerts}/&gt;
  
  }
  </code></pre>
  
  <p><strong>Child Component</strong></p>
  
  <pre><code>handleSubmit= event =&gt;{
          const {addEvent} = this.props
          const {addAlert} = this.props
          event.preventDefault();
          //alert(this.state.search_flight_no);
          var airportValueSelected= this.state.airport;
          var flightValue= this.state.search_flight_no;
          var airportList= FlightInfo.Airport;
          var newEvents=[];
          var newAlerts=[];
          for(var rootKey in airportList){
            if(rootKey===airportValueSelected)
             {
  
                 airportList[rootKey].forEach(element =&gt; {
  
  
                     if(element.flight_no===flightValue){
  
                      for(var m=0;m&lt;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;
                        newEvents.push(singleEvent);
                      }
  
                      for(var s=0;s&lt;element.Alerts.length;s++){
  
                        newAlerts.push(element.Alerts[s]["Alert"+(s+1)]);
  
                      }
  
                     }
  
                 });
                 if(newEvents.length&lt;1 &amp;&amp; newAlerts.length&lt;1){
                  this.setState({ open: true });
                 }
                 else{
                   console.log(newEvents);
                   console.log(newAlerts);
                 }
                 addAlert(newAlerts);  
                 addEvent(newEvents);
  
             }
          }
  </code></pre>
  
  <p>When I click and call <strong>handleSubmit</strong> method it keeps on appending events and alerts rather making it <strong>empty</strong> and storing new values rather <strong>appending</strong> previous state values. </p>