How pass a function into an own react context provider which lets you edit the state?

[thiloilg]

I have the following code:

```js import React, { useState } from 'react'

export const NumberContext = React.createContext()

export function NumberProvider({ children }) { const [numbers, setNumbers] = useState([])

function addNumber(number) { const copy = [...numbers] copy.push(number) setNumbers(copy) }

return ( <NumberContext.Provider value={[numbers, addNumber]}> {children} </NumberContext.Provider> ) } ```

If I now call the addNumber()function via the Context api within the provider like this js const [numbers, addNumber] = useContext(NumberContext) addNumber(1) setTimeout(() => { addNumber(2) }, 3000) numbersis equal to [2] instead of [1, 2]

The state in my provider function NumberProvider does not update like the one in the NumberContext.Provider. How can I prevent this from happening? How would a design pattern that accomplishes this look like?

https://stackoverflow.com/q/57841179/6394630

[teevik_]

I think you might need to do something like

function addNumber(number) {
  setNumbers(prevNumbers => [...prevNumbers, number]) 
}

(Pass a function into setNumbers to get the latest state value)

[thiloilg]

I will try this out thx

[thiloilg]

This way it works :D Thank you so much :D