Change Set State in Component Life Cycle React Js

Question

I have screen in which there is a drop down menu which is having values as months, on selecting a value from a menu , i want to change the state of the component according to which the data on the screen will change.

I am calling backend api, which is giving response of every month and I am storing the data in the form of different arrays like monthWiseAmountPayment and monthWiseAmountPaymentMonth but now when I am selecting the value from the drop down menu and trying to filter the data in my arrays depending on what month you have selected in the drop down and then change state of the component.

componentDidMount() {
  let monthWiseAmountPayment = [];
  let monthWiseAmountPaymentMonth = [];
  let invPaid = 0;
  let invUnpaid = 0;
  let invOverdue = 0;
  axios.get("http://localhost:5000/dashboard").then(response => {
    let Mrr = response.data.payment.total_count * response.data.payment.total_payment_amount) / 1000;
    this.setState({ monthlyRecurringRevenue: Mrr });

    this.setState({ netRevenue: response.data.payment.total_payment_amount });
    this.setState({
      playerActive: response.data.organization.enrollments[1]
    });
    this.setState({ playerEnded: response.data.organization.enrollments[3] });
    this.setState({
      playerInActive: response.data.organization.enrollments[5]
    });

    response.data.payment.month_wise.map(element => {
      let month = moment(element.month, "YYYY/MM").month();
      let formattedMonth = moment()
        .month(month)
        .format("MMMM")
        .toUpperCase();
      monthWiseAmountPayment.push(element.amount);
      monthWiseAmountPaymentMonth.push(formattedMonth);
      this.setState({ monthWiseAmountPayment: monthWiseAmountPayment });
      this.setState({
        monthWiseAmountPaymentMonth: monthWiseAmountPaymentMonth
      });
    });
  });
}

 handleMonth = (event) => {
    this.setState({selectedMonth:event.target.value})
  }


<select 
      value={this.state.selectedMonth} 
      onChange={this.handleMonth}
      class="custom-select custom-select-md" style = {{position:"absolute",width:"134px",marginRight:"27px",marginLeft:"905px",marginTop:"30px",borderRadius:"3px",backgroundColor:"#d8d5cf" }}>
          <option selected value="">select month</option>
          <option value="January">January</option>
          <option value="February">February</option>
          <option value="March">March</option>
          <option value="April">April</option>
          <option value="May">May</option>
          <option value="June">June</option>
          <option value="July">July</option>
          <option value="August">August</option>
          <option value="September">September</option>
          <option value="October">October</option>
          <option value="November">November</option>
          <option value="December">December</option>
      </select>

I had called setState onChange method but it is not re rendering the component not able to understand what is wrong.

I'm having a hard time understanding your question. Do you want to filter the data in your arrays depending on what month you have selected in the dropdown? — Tholle, Jul 13 '18 at 18:19
@Tholle yes i want to do that and then set the state according to value — Daksh Bhardwaj, Jul 13 '18 at 18:21
What you're looking for is the `onChange` event when you change the option in a dropdown list. `onChange` should then call `setState`. https://stackoverflow.com/questions/28868071/onchange-event-using-react-js-for-drop-down — Brett Merrifield, Jul 13 '18 at 18:31
@BrettMerrifield I am calling seState in onChange but it is not re rendering — Daksh Bhardwaj, Jul 13 '18 at 18:36
You're doing it wrong then. `setState` with a new value will always rerender your component. — Brett Merrifield, Jul 13 '18 at 18:38
Ey, what you can do is create a function that call the API and do the setState. So you call that function inside the onChange event. — Angel, Jul 13 '18 at 18:41
@BrettMerrifield I had edited my post please have a look at the post again with your suggestion — Daksh Bhardwaj, Jul 13 '18 at 18:43
Look at what @angel said. You have to call your API onChange and set state. — Brett Merrifield, Jul 13 '18 at 18:47
Your consecutive ```setState``` calls are overriding the values set in the previous calls. ```setState``` is not additive. Every time it is called it will set the state to exactly the object you pass it. That is why you see people use the spread operator with the previous state. Ie. ```this.setState({ ...this.state, newvalues: newvalue })``` — Dave Thomas, Jul 13 '18 at 20:38

score 0 · Answer 1 · edited Jul 13 '18 at 18:49

0

You have to integrate an eventListener on your dropdown waiting for on change events. Something like this:

render() {
  return(
    <div>
      <select onChange={this.handleChange}>
        ...
      </select>
    </div>
  )
)}
handleChange(event){
  const selectedItem = event.target.value;
  // Change your state here:
  this.setState({selection: selectedItem});
}

edited Jul 13 '18 at 18:49

Andrew Li

55,805
14
125
143

answered Jul 13 '18 at 18:48

Chrioyles

21
3

Angel · Answer 2 · 2018-07-13T19:29:59.613

I copy your code and did the best I could with this code it will probably work but if not you with this example you will understand how to write your code to work as you expect.

getInfoDashBoard = () => {

let monthWiseAmountPayment = [];
let monthWiseAmountPaymentMonth = [];
let invPaid = 0;
let invUnpaid = 0;
let invOverdue = 0;
axios.get("http://localhost:5000/dashboard").then(response => {
let Mrr = response.data.payment.total_count * response.data.payment.total_payment_amount) / 1000;   

response.data.payment.month_wise.map(element => {
  let month = moment(element.month, "YYYY/MM").month();
  let formattedMonth = moment()
    .month(month)
    .format("MMMM")
    .toUpperCase();
  monthWiseAmountPayment.push(element.amount);
  monthWiseAmountPaymentMonth.push(formattedMonth);   
});

 this.setState({...this.state, monthlyRecurringRevenue: Mrr, 
    etRevenue: response.data.payment.total_payment_amount
    ,playerActive: response.data.organization.enrollments[1]
    ,playerEnded: response.data.organization.enrollments[3]
    ,playerInActive: response.data.organization.enrollments[5]
    ,monthWiseAmountPayment: monthWiseAmountPayment
    ,monthWiseAmountPaymentMonth: monthWiseAmountPaymentMonth
    ,monthWiseAmountPaymentMonthCopy: monthWiseAmountPaymentMonth
     });
});
}

componentDidMount() {
  this.getInfoDashBoard();
}

   handleMonth = (event) => {
   let month = event.target.value;     
   let monthWiseAmountPaymentMonth_ = [];
   let month = moment(month, "YYYY/MM").month();
   let formattedMonth = moment()
    .month(month)
    .format("MMMM")
    .toUpperCase();    

  monthWiseAmountPaymentMonth_ = monthWiseAmountPaymentMonthCopy.filter((item) => {
                                     if(item === formattedMonth) 
                                      {
                                          return item;
                                      }
                                    }
                                 );

     this.setState({selectedMonth: month, 
monthWiseAmountPaymentMonth: monthWiseAmountPaymentMonth_})
}


<select 
    value={this.state.selectedMonth} 
    onChange={(e) => {this.handleMonth(e)}
    class="custom-select custom-select-md" 
    style= {{position:"absolute",width:"134px",  
       marginRight:"27px",marginLeft:"905px",
       marginTop:"30px",borderRadius:"3px",
       backgroundColor:"#d8d5cf" }}>
      <option selected value="">select month</option>
      <option value="January">January</option>
      <option value="February">February</option>
      <option value="March">March</option>
      <option value="April">April</option>
      <option value="May">May</option>
      <option value="June">June</option>
      <option value="July">July</option>
      <option value="August">August</option>
      <option value="September">September</option>
      <option value="October">October</option>
      <option value="November">November</option>
      <option value="December">December</option>
  </select>

score 0 · Answer 3 · answered Jul 13 '18 at 20:24

0

Is the backend API returning Json object? If yes , then put the API call in the constructor rather than in componentDidMount function.

React-Native fetch example not rendering

answered Jul 13 '18 at 20:24

Stotra

103
7

Change Set State in Component Life Cycle React Js

3 Answers3