score:0

you need to specify a state for it to be defined and used. in the begining of your component, specify the state:

class products extends component {
state = {
   yourstate:6
}
render() {

score:0

const { id } = this.state.products

there is no state in your products component. in order to reach the data in the context store you gotta use arrow function inside your consumer.

so idea behind context api is, you store your state inside the context object and this object comes with 2 components. provider and consumer.

provider:provider will provide all the information for the app. we are gonna set up provider on top of our app like so:

index.js

import { myprovider } from "./context";
reactdom.render(
  <myprovider>
    <browserrouter>
      <app />
    </browserrouter>
  </myprovider>,
  document.getelementbyid("root"));

consumer: is gonna use the info provided by the provider. we can grab the info wherever we are in our application.

so this is what you are returning from the provider.

value={{
          state: this.state,
        productdetail: this.productdetail}}

value prop is an object. this is how you should access in your components:

<mycontext.consumer>
        {(context) => {
        //context is the object that is returned by the provider
        //inside state you have products array and you need to choose one of those elements inside the array. lets say you wanna select the first element which is the 0 index.

          const {id, info} = context.state.products[0];
        return (
          <h1>{info}</h1>
        )
        }}
      </mycontext.consumer>

Related Query

More Query from same tag