react setstate object code example

Example 1: Updating an object with setState in React

this.setState(prevState => {
  let jasper = Object.assign({}, prevState.jasper);  // creating copy of state variable jasper
  jasper.name = 'someothername';                     // update the name property, assign a new value                 
  return { jasper };                                 // return new object jasper object
})

//2ND METHOD

this.setState(prevState => ({
    jasper: {                   // object that we want to update
        ...prevState.jasper,    // keep all other key-value pairs
        name: 'something'       // update the value of specific key
    }
}))

Example 2: setstate find opject in state and update

this.setState(prevState => ({
  food: {
    ...prevState.food,           // copy all other key-value pairs of food object
    pizza: {                     // specific object of food object
      ...prevState.food.pizza,   // copy all pizza key-value pairs
      extraCheese: true          // update value of specific key
    }
  }
}))

Example 3: react setstate object

import React, { useState } from 'react'
const Example = () => {
  const [ account, setAccount ] = useState({ username: "", password: "" })
	return(
      <div>
      <p>Debug { JSON.stringify(account) }
		<form>
          <input 
			text="text" 
			placeholder="Username"
			onChange={(e) => {
              setAccount({ ...account, username: e.terget.value })
            }}
		  />
		  </br>
		  <input 
			text="text" 
			placeholder="Password"
			onChange={(e) => {
              setAccount({ ...account, password: e.terget.value })
            }}
		  />      
	  </form>
      </div>
    )
  }
  
 https://www.youtube.com/watch?v=nWGcOTyTkQ0&t=457s

Example 4: react native setstate object

this.setState({
	lang1:{
		...this.state.lang1,
		name: "myExample"
	}
})