CODEWITHSUNDEEP
javascriptreactjs
Redhewlett
Redhewlett

Reputation: 143

How do i update values of keys inside and object with setSate in react

I think i don't use enough objects(dictionaries), so i have an issue: i am using typscript, i have an object holding all the quantities for each element of a recipe inside a state. when the user changes the size i want to update those quantities by a factor. flour2 and oil are optional, every item of this object is a number(their type is being defined somewhere else)

const [doughQuantities, setDoughQuantities] = useState({
    flour: doughRecipe.flour.quantity,
    flour2: doughRecipe.flour2?.quantity,
    water: doughRecipe.water.quantity,
    salt: doughRecipe.salt.quantity,
    yeast: doughRecipe.yeast.quantity,
    oil: doughRecipe.oil?.quantity
  })

  useEffect(() => {
    if (size === 'large') {
      const factor = 1.5
      setDoughQuantities(prev => Object.values(prev).forEach(element =>{
        element = element * factor
      }))
    }
  }, [size])

when typing my setState fucntion i get this eslint:

"Argument of type '(prev: { flour: number; flour2: number | undefined; water: number; salt: number; yeast: number; oil: number | undefined; }) => void' is not assignable to parameter of type 'SetStateAction<{ flour: number; flour2: number | undefined; water: number; salt: number; yeast: number; oil: number | undefined; }>'. Type '(prev: { flour: number; flour2: number | undefined; water: number; salt: number; yeast: number; oil: number | undefined; }) => void' is not assignable to type '(prevState: { flour: number; flour2: number | undefined; water: number; salt: number; yeast: number; oil: number | undefined; }) => { flour: number; flour2: number | undefined; water: number; salt: number; yeast: number; oil: number | undefined; }'. Type 'void' is not assignable to type '{ flour: number; flour2: number | undefined; water: number; salt: number; yeast: number; oil: number | undefined; }'."

How does one read and write value of keys inside such an object?

Upvotes: 0

Views: 30

Answers (1)

Mina
Mina

Reputation: 17284

You initialized the state as an object and then modify it to an array.

If you want to set an object and multiply the value of each property by the factor.

const [doughQuantities, setDoughQuantities] = useState({
    flour: doughRecipe.flour.quantity,
    flour2: doughRecipe.flour2?.quantity,
    water: doughRecipe.water.quantity,
    salt: doughRecipe.salt.quantity,
    yeast: doughRecipe.yeast.quantity,
    oil: doughRecipe.oil?.quantity
  })

useEffect(() => {
    if (size === "large") {
        const factor = 1.5;
        setDoughQuantities((prev) =>
            Object.fromEntries(
                Object.entries(prev).map(([key, value]) => {
                    return [key, value * factor];
                })
            )
        );
    }
}, [size]);

Upvotes: 1

Related Questions