Question 223219 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to Change more then one State in React

Trying to update a property inside state and want to know if I need to do both in order for the change to happen to one of them

I am trying to update the state using setTimeout function. If I have 2 properties in side the this.state object but in the setTimeout function I only update one of those objects then can I use the other property still?

Tags:

2

Answers


  1. 0

    Yes, you can still use the other property that you didn’t update in the setTimeout function. Updating one property in the state using setState or useState doesn’t affect the other properties in the state.

    Here’s a simple example to illustrate this:

    import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      property1: 'value1',
      property2: 'value2',
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ property1: 'new_value1' }); // Updating property1
    }, 1000);
  }

  render() {
    const { property1, property2 } = this.state;

    return (
      <div>
        <p>Property 1: {property1}</p>
        <p>Property 2: {property2}</p>
      </div>
    );
  }
}

export default MyComponent;
    Login or Signup to reply.
  2. 0

    if you are using the useState hook to manage your state if you set a new object in timeout the other state that you are not providing value for them will be lost because the new object will be replaced with the old one instead you can give the setState( that you get from useState hook ) a function that accepts a argument which is your previous status

    function Component() {
    const [state, setState] = useState({
      firstName: 'john',
      lastName: 'doe'
     })
    useEffect(()=> {
      setTimeout(()=> {
         setState(prevState => ({...prevState,  name : 'newName'})) // this will update the name field and keep the other as they are 
         },1000)
     },[])

}

    note that if you’re using the class component none of this is nessessory and the this.setState method will take care of that if it is your case just provide to the this.setState method an object with the fields that you want to update it will be fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search