Using react api context alongside react router

Question

I have a problem with passing context to route. I get an error when i click a link that goes to my component where context was passed from App component. Below is that component with App (only one import just to show where Context is coming from):

App.js

import { Context } from './Context';
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
       cryptolist: []
    }
  }

  componentDidMount = () => {
    fetch('https://api.coinmarketcap.com/v2/ticker/?structure=array')
      .then(response => response.json())
      .then(json => this.setState({
        cryptolist: json.data
      }))
  }

  render() {
    return (
      <div>
        <Menu />
        <Context.Provider value={this.state}>
          <Userlist />
        </Context.Provider>
      </div>
    )
  }
}

export default App;

Userlist.js ( should be cryptolist or something )

import { Context } from '.././Context'



export default class Userlist extends Component {
  render() {
    return (
      <main>
        <Context.Consumer>
          {(context) => context.cryptolist.map(el => {
              return (
                  <div>
                      <h2>{el.name}</h2>
                      <h5>{el.symbol}</h5>
                      <h3>{el.quotes.USD.price}</h3>
                  </div>
              )
          })}
        </Context.Consumer>
      </main>
    )
  }
}

Context.js

import React from 'react';

export const Context = React.createContext();

Everything works just fine here untill i wanted to make a menu that links to this component.

import React from "react";
import { slide as Slider } from 'react-burger-menu';
import { BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Main from './main';
import Userlist from './userlist';



export default class Menu extends React.Component {
  render () {
    return (
        <Router>
        <div className="bg-navy w-100 h-100">
          <Slider width={ 180 } isOpen={ false }>
            <Link className="menu-item" to="/main">Home</Link>
            <Link className="menu-item" to="/crypto">About</Link>
          </Slider>
             <Switch>
                <Route path="/main" component={Main} />
                <Route path="/crypto" component={Userlist} />
             </Switch>
          </div>
      </Router>
    );
  }
}

When i click a link to component Userlist i get an error thats cryptolist is not defined. I get it that Userlist can't see a context after clicking link to it. How to pass it correctly?

devserkan · Accepted Answer · 2018-09-24 17:49:41Z

1

You are using the routes in the Menu component. Is this really you want? Though, I don't know how this slide thingy works. Maybe this is the way you want to go. I think your problem occurs because your Menu component is not wrapped by the provider. Try like this:

<Context.Provider value={this.state}>
    <Menu />
    <Userlist />
</Context.Provider

answered Sep 24, 2018 at 17:49

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

2 Comments

Kamil Staszewski Over a year ago

It looks like its working. Thought theres much more coding to do. Thank you.

devserkan Over a year ago

You are welcome. If you consider accepting one of the answers here then this question will be closed.

mcssym · Accepted Answer · 2018-09-24 18:06:01Z

1

Your Menu component will call Userlist but as it is out the Provider the context doesn’t exist! Replace Userlist in Context.Provider by Menu and all will be fine.

answered Sep 24, 2018 at 18:06

mcssym

9445 silver badges8 bronze badges

Collectives™ on Stack Overflow

Using react api context alongside react router

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related