DEV Community

Andrei L
Andrei L

Posted on • Edited on

6 2

🪆 Nesting and overriding new React Context API

#react #context #override #reactrouter

While learning react-router v4 I read some of their source code. And as we know they are using current context for passing down router and route info overriding previous/parent route info

GitHub logo remix-run / react-router

Declarative routing for React


View on GitHub




getChildContext() {
  return {
    router: {
      ...this.context.router,
      route: {
        location: this.props.location || this.context.router.route.location,
        match: this.state.match
      }
    }
  };
}
Enter fullscreen mode Exit fullscreen mode

React team announced new Context API that no longer will be deprecated in React v16.3.0, that is already released :)

https://github.com/facebook/react/releases/tag/v16.3.0

Now I was thinking how ReactTraining will make this overriding using new Context API.
From start I used create-react-context polyfill for new context. It works exactly, just change the import.

import { render } from "react-dom";
import React, { createContext } from "react";
// import createContext from "create-react-context";
Enter fullscreen mode Exit fullscreen mode

Next we need to create the context. Context has a Consumer and a Provider

const { Provider, Consumer } = createContext();
Enter fullscreen mode Exit fullscreen mode

Provider is used to pass to him some data in value prop

render() {
    return (
        <Provider value={"React is Awesome!"}>
            nested content...
        </Provider>
    )
}
Enter fullscreen mode Exit fullscreen mode

And Consumer is used to consume that value using render props

render() {
    return (
        <Consumer>
            {(theValue) => {
                return theValue
            }}
        </Consumer>

        // shorthand
        <Consumer>
            {theValue => theValue}
        </Consumer>
    )
}

// output
// React is Awesome!
Enter fullscreen mode Exit fullscreen mode

We may use the Consumer how many times we want.

Now back to our overriding. Here is my app

const App = () => (
  <Provider value={{ location: "/" }}>
    <NestedPath>
      <NestedPath location="haha/">
        <NestedPath>
          <NestedPath>
            <NestedPath>
              <NestedPath />
            </NestedPath>
          </NestedPath>
        </NestedPath>
      </NestedPath>
    </NestedPath>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById("root"));
Enter fullscreen mode Exit fullscreen mode

And here is the output

/
/location/
/location/haha/
/location/haha/location/
/location/haha/location/location/
/location/haha/location/location/location/
Enter fullscreen mode Exit fullscreen mode

And this is my NestedPath component

const NestedPath = ({ location = "location/", children }) => (
    <Consumer>
        {router => (
            <React.Fragment>
                <div>{router.location}</div>
                <Provider value={{ ...router, location: router.location + location }}>
                    {children || null}
                </Provider>
            </React.Fragment>
        )}
    </Consumer>
);
Enter fullscreen mode Exit fullscreen mode

Here as you see inside Provider we override previous one with a new value. And all child Consumers now will take the new value.

Here is a sandbox to play with

https://codesandbox.io/s/lrvv8w784q

Thanks for reading!!! This is a duplicate of my Medium Story!
dev.to is new medium for developers :)

Top comments (8)

Collapse
 
elpdcore profile image
Eyal L •

Great Article. Thank you.

Collapse
 
bindhu54259683 profile image
bindhu •

Hi,

How we can add API to the React Redux and give some example?

Collapse
 
iamandrewluca profile image
Andrei L •

What do you mean? Is this related to React Context API?

Collapse
 
bindhu54259683 profile image
bindhu •

Can you Please explain with Register Form?

Collapse
 
bindhu54259683 profile image
bindhu •

YES

Thread Thread
 
iamandrewluca profile image
Andrei L •

Please explain your use case and I'll try to help. Give me some context of what you want to do.

Thread Thread
 
bindhu54259683 profile image
bindhu • • Edited

Example In Registration Form When i am trying to register with the Name,Email and Phone Number it can't stored in redux could you please explain How to perform GET and POST methods into my redux using API calls.

Here is my code..

export function setName(name)
return{
type:"UPDATENAME",
payload: new Promise((resolve,reject)=>{
resolve(name);
})

}

}

Collapse
 
rigoli82 profile image
Marcos •

Hey man, great tutorial! I was searching for something like this. Thank you!

Read next

devshakilh profile image

How to Create Scroll Animation for Text in Your Website

Md Shakil Hossain -

sujans profile image

I wish more designers wrote code

Sujan Sundareswaran -

rtambunt profile image

Create a Time-Saving Template 🧩 with React, Vite, and Tailwind CSS

Robbie Tambunting -

morewings profile image

Let's create Data Table. Part 4: Column pinning

Dima Vyshniakov -