State not updating until 2nd time the form is submitted

Question

So when a session is added and the form is submitted, I want the price of the client to be transferred into the state of my session.. that is what I am trying to do in this part of my code here.

state = {
    id: null, 
    name: null, 
    duration: null, 
    dayOfWeek: null,
    price: null
  }

handleSubmit = (e) => {
    e.preventDefault();
    let newPrice = 0;
    this.props.clientList.filter(client => {
      if (client.name === this.state.name) 
      {newPrice = client.price}
      this.setState({
        price : newPrice
      });
      console.log("price = " + this.state.price, 'newPrice = ' + newPrice)
    })
    this.props.addSession(this.state);
    e.target.reset();
    this.setState({
      id: null, 
      name: null, 
      duration: null, 
      dayOfWeek : null
    });
  }

What is happening and I am trying to portray in the image of the console and the two sessions I added is that when I add it the first time it logs out the price = null and newPrice = 40 , the second time the price = 40. Why isn't my code working here?

I can add more of my code if needed. Let me know what you need to see, thanks!

I also just realized that in that last part of the code where I set the state back to null, I don't have price: null. When I add it, it doesnt even work the second time like it did before. — josephT, Apr 07 '19 at 03:19

score 2 · Answer 1 · answered Apr 07 '19 at 03:49

2

The state does not update immediately. If you need a callback after state has updated You can use

this.setState({
      price : newPrice
}, ()=>{
 //CallBack here
       console.log("price = " + this.state.price, 'newPrice = ' + newPrice)
})

Hope it helps. If I don't understand your problem. Please reply

answered Apr 07 '19 at 03:49

Kumar

1,187
18
31

is there a way to make the state update in time so that when I submit my form, the data will be ready to output? – josephT Apr 07 '19 at 04:07
I don't necessarily need a callback, i think. I just need it to be able to send the data to my action creator on time – josephT Apr 07 '19 at 04:27
@josephT setState is quite fast. The user will not see the difference between the state change, you can use the callback. When you submit the form data will ready to output as you need. – Kumar Apr 07 '19 at 04:33
@josephT if you need to send `newPrice` to your action. You can only send the `newPrice` value to your action creator. As `setState` is `async`, the state will not update immediately. – Kumar Apr 07 '19 at 04:56

score 2 · Accepted Answer · answered Apr 07 '19 at 04:37

setState is an async function ... and you're accessing your old-state-value by calling the following line directly after setState:

this.props.addSession(this.state);

-

handleSubmit = (e) => {
  e.preventDefault();
  let newPrice = 0;
  this.props.clientList.filter((client) => {
    if (client.name === this.state.name) {
      newPrice = client.price;
    }

    this.setState({
      price: newPrice,
    });
    console.log(`price = ${this.state.price}`, `newPrice = ${newPrice}`);
  });

  this.props.addSession({ ...this.state, price: newPrice }); // <- Look at this
  e.target.reset();
  this.setState({
    id: null,
    name: null,
    duration: null,
    dayOfWeek: null,
  });
};

State not updating until 2nd time the form is submitted

2 Answers2