By Martin Massera


2018-09-19 12:57:08 8 Comments

I'm adding React to an existing webapp. For now, I'm selectively replacing parts of the page, rendering different components in different divs. For this reason I don't have a single tree from where all components hang. I would like to use one context provider to share context information across all these components, but since I don't have a single tree I can't make them all hang from the same context provider.

Is there a way to use the default context defined like this?

const MyContext = React.createContext(some_data);

and to have NO provider from which components hang, rather only consumers?

<MyContext.Consumer>...</MyContext.Consumer>

It works for the default value, but then I don't know how to change the value of this default context.

Is my understanding correct and this is meant for all consumers hanging from a provider? or is there a way to programatically set the value of the default context? Is there another way to approch this?

2 comments

@Estus Flask 2018-09-19 14:20:33

React context totally relies on component hierarchy, it cannot be used to provide common context for unrelated React widgets.

If the page consists of multiple React widgets, they need to have a common parent. This can be done with portals, this way the whole page doesn't need to be converted to React component.

Here's an example:

<div id="App"></div>
<h2>Foo widget</h2>
<div id="FooWidget"></div>
<h2>Bar widget</h2>
<div id="BarWidget"></div>

class App extends Component {
  render() {
    return <FoobarContext.Provider value={{foo: 'foo', bar: 'bar'}}>    
      {ReactDOM.createPortal(<FooWidget />, document.getElementById('FooWidget'))} 
      {ReactDOM.createPortal(<BarWidget />, document.getElementById('BarWidget'))} 
    </FoobarContext.Provider>;
  }
}

const FooWidget = props => <FoobarContext.Consumer>
  {({ foo }) => foo}
</FoobarContext.Consumer>;

...

ReactDOM.render(<App />, document.getElementById('App'));

@arb 2018-09-19 13:55:52

You may want to look into portals. This lets you target specific elements to render your React tree into. You can have a single component tree, with a declared context in your example, and hang all your components off of that independent of how it's being rendered into the DOM.

This article, under "legacy applications" gives you a good idea of how to do what I'm talking about.

Related Questions

Sponsored Content

2 Answered Questions

[SOLVED] How to change Context value while using React Hook of useContext

34 Answered Questions

[SOLVED] What is the difference between state and props in React?

  • 2015-01-16 19:28:27
  • skaterdav85
  • 200640 View
  • 567 Score
  • 34 Answer
  • Tags:   javascript reactjs

4 Answered Questions

[SOLVED] Access React Context outside of render function

1 Answered Questions

Why is React Context API mis-behaving in Electron app?

1 Answered Questions

[SOLVED] React Context Consumer does not update (but Provider does)

2 Answered Questions

[SOLVED] Update react context outside of a consumer?

Sponsored Content