useState values where useContext.Provider is defined

Question

I am doing an app where I have some components and I've defined useStates from them, obtaining the values I need from all of them

I've also created a Context with useContext and I wrapped my main component like this:

import React from 'react'
import { AppContext } from './components/appContext/AppContext'

import { MainApp } from './MainApp'

export const App = () => {


    const testValues = {
        myDomine: 'domine name',
        mySpace: 'space name',
        color: 'red',
        persons: '5 ',
        privacidad: true

    }


    return (
        <AppContext.Provider value={testValues}>
            <MainApp/>

        </AppContext.Provider>
    )
}

with the above testValues object I can obtain what I need in other component like this:

const { myDomine, mySpace} = useContext(AppContext)

previously importing useContext and the AppContext I've created beforehand

you see all works fine BUT

1. How can I pass my components stateValues that I've obtained individually to this testValues object?

2. Is what I am trying to achieve completly wrong?

thanks in advance

Answer 1

I think you can do that.

for example:

on provider

    import {useState} from 'react';

    const [testValues, setTestValues] = useState({
        myDomine: 'domine name',
        mySpace: 'space name',
        color: 'red',
        persons: '5 ',
        privacidad: true
    })

    <AppContext.Provider value={[testValues, setTestValues]}>
       <MainApp/>
    </AppContext.Provider>

on child component

    const [testValues, setTestValues] = useAuthContext();

Finally: You can use both of setTestvalues(update state) and testValues(state).