setState values not changing in react

Question

I have a simple react form but when I console log my object in state it comes up as empty values. I have been sitting for a while now trying to get my values in. When i console log the event I get the values in my console, but I cant console log my state object. Here is my code:

handleSubmit = (event: any) => {
event.preventDefault();
event.persist();
this.setState({
  IPObject: {
    Name: event.target[0].value,
    IPList: event.target[1].value,
    priority: event.target[2].value,
    rule: event.target[3].value
  }
})
console.log(this.state.IPObject)


render() {
return (
  <Form className="mui-form" onSubmit={this.handleSubmit}>
    <legend>Add your IP address</legend>
    <label>Your Name</label>

    <Input placeholder="Name" required={true}></Input>
    <label>Your IP Address</label>
    <Input placeholder="IP address" required={true}></Input>
    <label>Priority Rule (Add any number from 400 and above)</label>
    <Input placeholder="Priority Rule" required={true}></Input>
    <label>Subnet (Leave on 24 by default) Unless you know what you doing</label>
    <Select defaultValue="24">
      <Option value="32" label="32"></Option>
      <Option value="24" label="24"></Option>
    </Select>
    <br></br>
    <Button variant="raised">Add IP</Button>
  </Form>
);

and this is in my state:

this.state = {
  IPObject: {
    priority: "",
    IPList: "",
    rule: "",
    Name: ""
  }
}

Does this answer your question? setState doesn't update the state immediately — ggorlen
– ggorlen, Commented Mar 28, 2021 at 8:33
setState is asynchronous. You won't see the value until the next render. — ggorlen
– ggorlen, Commented Mar 28, 2021 at 8:34

Babak Yaghoobi · Accepted Answer · 2021-03-28 08:36:25Z

1

setState is async function, use like this for getting result:

this.setState({...}, ()=>{console.log(...)});

and in your code:

this.setState({
  IPObject: {
    Name: event.target[0].value,
    IPList: event.target[1].value,
    priority: event.target[2].value,
    rule: event.target[3].value
  }
}, ()=>{
  console.log(this.state.IPObject)
})

answered Mar 28, 2021 at 8:36

Babak Yaghoobi

1,99510 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ognjen Mišić · Accepted Answer · 2021-03-28 08:36:46Z

1

Your assumption is wrong, you can't procedurally & synchronously update the state and then log it the next line, because technically the console.log will trigger before your actual state update. If you want to track state changes, use useEffect/componentDidUpdate and track the state change.

answered Mar 28, 2021 at 8:36

Ognjen Mišić

1,4462 gold badges19 silver badges42 bronze badges

Comments

user1155773 · Accepted Answer · 2021-03-28 08:38:09Z

0

Try this

handleSubmit = (event: any) => {
  event.preventDefault();
  event.persist();
  this.setState({
      IPObject: {
      Name: event.target[0].value,
      IPList: event.target[1].value,
      priority: event.target[2].value,
      rule: event.target[3].value
  }
}, () => {

 console.log(this.state.IPObject)

})

answered Mar 28, 2021 at 8:38

user1155773

741 silver badge8 bronze badges

Collectives™ on Stack Overflow

setState values not changing in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related