How to use Context API to pass down a state while using a Router in React JS

Question

I have a Context API file setup which has a state and a function which fetches data from an API and sets the state, and i want to pass the state down to my other components. In my App.js, I am using React-Router to specify the routes. How do i pass the state down to these components using Context API, whilst using React-Router.

My ApiContext.js file looks like this :

import React, {useState, createContext } from 'react';

export const ApiContext = createContext();

export const ApiProvider = async (props) => {
    const [data, setData] = useState(null);

    const getURL = 'https://examplefetchsite.com';
    const response = await fetch(getURL).json();
    setData(response);
    return (
        <ApiContext.Provider value={[data, setData]}>
            {props.children}
        </ApiContext.Provider>
    );
}

My App.js's return looks like this :

return (
      <ApiProvider>
        <Router>
          <div>
            <NavBar />
            <Switch>
            <Route path="/" exact component={ Dashboard } />
            <Route path="/create" component={ Create } />
            <Route path="/view" component={View} />
            </Switch>
          </div>
        </Router>
      </ApiProvider>
    )

Adam Jeliński · Accepted Answer · 2020-04-10 09:54:25Z

2

In terms of the context itself, you don't have to change anything in your provider and only do something like this in the child components:

import React, {useContext} from 'react'
import {ApiContext} from './ApiContext'

const Dashboard = (props) => {
    const [data, setData] = useContext(ApiContext)

    //you should have access to both data and setData

    return (
        //things
    )
}

However in the ApiContext.js you aren't calling the API request properly. You should use useEffect to fetch the data only on the first render.

import React, {useState, createContext, useEffect} from 'react';

export const ApiContext = createContext();

export const ApiProvider = (props) => {
    const [data, setData] = useState(null);

    useEffect(async () => {
        const getURL = 'https://examplefetchsite.com';
        const response = await fetch(getURL).json();
        setData(response);
    }, [])

    return (
        <ApiContext.Provider value={[data, setData]}>
            {props.children}
        </ApiContext.Provider>
    );
}

edited Apr 10, 2020 at 9:54

answered Apr 10, 2020 at 9:51

Adam Jeliński

1,7981 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kdvinmk Over a year ago

I am currently doing this, but React throws this error "Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."

Kdvinmk Over a year ago

Nope, I tried useEffect() and that doesn't seem to solve it. I am still getting the error that i mentioned above.

Adam Jeliński Over a year ago

Did you try my code? You had an async in the ApiProvider, which would attempt to create an asynchronous component, which is impossible

Kdvinmk Over a year ago

Thank you so much man ! I realised that the problem was on the async, it worked once i removed the async , stupid me! Thank you !

Kai CriticallyAcclaimed Cooper Over a year ago

Will this cause a re-render if the context changes?

|

HermitCrab · Accepted Answer · 2020-04-10 09:55:17Z

0

ApiProvider

<ApiContext.Provider value={{data, setData}}>

Child component

const context = useContext(ApiContext); 
console.log(context.data); 
context.setData(123);

edited Apr 10, 2020 at 9:55

answered Apr 10, 2020 at 9:47

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to use Context API to pass down a state while using a Router in React JS

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related