CODEWITHSUNDEEP
reactjs
user12324754
user12324754

Reputation:

React context : state flow broken from Provider to Consumer

I want to try to transfer the record from state through several components using Consumer and Provider. I have a value in the ShoppingBasketProvider component that I want to pass to the ShoppingBasket component, but at this point it doesn't output anything and equals undefined. Tell me what I'm doing wrong.

enter image description here

I have next components:

ShoppingBasketContext:

import React, { Component, PureComponent } from "react";

export const ShoppingBasketContext = React.createContext();

export default class ShoppingBasketProvider extends Component {
  state = {
    shoppingBasketItems: 11
  }

  render() {
    return (
      <ShoppingBasketContext.Provider shoppingBasketItems={ this.state.shoppingBasketItems }>
        {this.props.children}
      </ShoppingBasketContext.Provider>
    )
 }
}

app:

import React, {PureComponent} from 'react'
import './App.scss';
import Shop from '../../page/shop/shop.js'
import AboutUs from '../../page/aboutUs/aboutUs.js'
import Menu from '../menu/menu.js'
import ShoppingBasketProvider from '../shoppingBasketProvider/shoppingBasketProvider.js'
import { BrowserRouter, Switch, Route, Redirect, Router } from "react-router-dom";

export default class App extends PureComponent {


  render() {
    return (
      <main>
          <ShoppingBasketProvider>
            <BrowserRouter>
              <Menu />
              <Switch>
                <Route path="/" exact children={<Shop />} />
                <Route path="/aboutus" children={<AboutUs />} />
                <Redirect to="/" />
              </Switch>
            </BrowserRouter>
          </ShoppingBasketProvider>
      </main>
    );
  }
}

ShoppingBasket:

import React, {PureComponent} from 'react'

import { ShoppingBasketContext } from '../shoppingBasketProvider/shoppingBasketProvider.js';

export default class ShoppingBasket extends PureComponent {
  render() {
    return (
      <div>
        <ShoppingBasketContext.Consumer>
          {shoppingBasketItems => (
            <React.Fragment>
              Shopping cart: <span>{shoppingBasketItems}</span>
            </React.Fragment>
          )}
        </ShoppingBasketContext.Consumer>
      </div>
    )
  }
}

Upvotes: 1

Views: 202

Answers (1)

Jjagwe Dennis
Jjagwe Dennis

Reputation: 1853

The prop you pass to the provider must be called value. See suggested change below 

return (
      <ShoppingBasketContext.Provider value={ this.state.shoppingBasketItems }>
        {this.props.children}
      </ShoppingBasketContext.Provider>
    )

Upvotes: 1

Related Questions