How to change context in Consumer instead of Provider?

Question

I found this question which answers to this problem with adding all context change functions to the topmost parent. React Context api - Consumer Does Not re-render after context changed

But this is awkward, I want the functions that change the context in the components that change it. Let's say I have a button that changes something in the content, I want to have the handleChange() in that component instead of clogging my parent with functions and states that don't belong there.

Is this possible to outsource context logic to components?

Please, try to include some relevant code to better represent your problem. — Dupocas, Nov 05 '19 at 18:32

score 0 · Answer 1 · answered Nov 05 '19 at 18:37

0

If you don't want the parent to have state and state-altering functions, just don't use context - it sounds like local component state is all you are looking for.

answered Nov 05 '19 at 18:37

gitcdn

485
3
9

No, the components are supposed to be siblings. So a button should change a prop in the context and another sibling on the same level should update on that change. – user6329530 Nov 05 '19 at 18:44

score 0 · Answer 2 · answered Nov 05 '19 at 18:43

0

Yes, you need use useReducer. https://reactjs.org/docs/hooks-reference.html#usereducer

You create a single reducer with the help of useReducer and pass it into Context. After that, you can use state and the dispatch from any component that is connected to the context.

Links:

answered Nov 05 '19 at 18:43

it-efrem

107
1
6

Or you can use multiple `useState` in the parent component and pass from through `Context`. But it seems to me that this is not the best solution. – it-efrem Nov 05 '19 at 18:47
Is this possible in a class-based App? – user6329530 Nov 05 '19 at 18:53
Hooks are used only in functional components – it-efrem Nov 05 '19 at 19:06

Dupocas · Accepted Answer · 2019-11-05T21:33:30.497

context is a just a fancy technique of passing props without worring about hierarchy.

Decoupling the data flow is the only differential when comparing with normal props. So changing the value of a context comes with the some caveats.

When you need to change a shared state between parent and child you need to lift your state up and pass down a way of changing it. With context is no different

Assume the following provider which pass down a theme and a way of chage it

export const context = createContext()
const { Provider } = context

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState({ color: 'foo' })
    const value = { theme, setTheme }
    return (
        <Provider value={value}>
            {children}
        </Provider>
    )
}

You still need to pass down a handler to change the state. To change theme from inside a Component (which is descendent of ThemeProvider) you can do like this

import { useContext } from 'react'
import {context} from './ThemeProvider'

const Component = () =>{
    const {theme, setTheme} = useContext(context)

    const handleChange = () => setTheme({color:'blue'})

    return <button onClick={handleChange}>Change</button>
}

Usually (not necessarily) Providers are declared in the top-level component App.js

//App.js
import { ThemeProvider } from './ThemeProvider'

const App = () =>{
    <ThemeProvider>
         <RestOffYourApp />
    </ThemeProvider>
}

Yes, I understood the example but take I'd want to use it in this way, how would I add this to App.js — user6329530, Nov 05 '19 at 18:55

How to change context in Consumer instead of Provider?

3 Answers3