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>
Source: stackoverflow.com
Related Query
- React Context API trouble with displaying specific items details page
- Contentful API with React how to get specific fields from array items instead of whole arrays
- React Context API - persist data on page refresh
- How to use context api with react router v4?
- How should the new context api work with React Native navigator?
- Passing a function with React Context API to child component nested deep in the tree
- How do you update Formik initial values with the react context api values after an AJAX request?
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- Unit testing: react context api with enzyme return an empty object
- Next.js context provider wrapping App component with page specific layout component giving undefined data
- React - New Context API not working with Class.contextType, but works with Context.Consumer
- How to use react context api with getDerivedStateFromProps?
- React router - pass api data to the linked component to open with a new page
- Enzyme errors with React Context and Hooks API
- Getting SSR to work with the React Context API
- React Context API with Typescript Generic
- React - useState Hook with Context Api - can't copy a state array to another state array
- What the best way to loading data to a cart react js with context api
- React Higher Order Component explained with Context API example
- React, how to pass product id to details page with React Router Dom?
- Fill context from REST API and use it in a React component with useEffect and useContext
- React Redux one-page app: handle an API 404 with full page render
- React route to a specific product details page from a product page
- Jump to specific page with react pdf while showing all
- React - issue with displaying items in an array
- Build a CRUD App with React Hooks and the Context API
- React JS Context API with functional component is not working
- Prevent re-rendering unchanged items in todo app with React Context and useReducer
- i have a problem with displaying my question in seperate page in react
- Fetching API data, nested in two arrays and displaying it with React
More Query from same tag
- Preventing Unnecessary Requests when update the input
- React - renderSubtreeIntoContainer: Use case example
- React with server side variables
- How to Update chart in react-chartjs-2?
- Insert a div that does not exist in html form sass/css
- Count views every time someone visit the page with firebase and Reactjs
- React Table Filtering - Trouble with accessors that are returning values
- Output Form Field Values in React
- How to export and import a function from a Class Component
- How to pass json data from one component to another using functions in react
- reactjs improving my code for calling childNode
- Using setState inside useEffect on updating forms
- React js backend how to get the price_data info from stripe.checkout.session.line_items and push the data into firestore
- how i replace id with date in json using object.keys, spred operator, and if condition
- Why callbacks in react functional component is not reading the updated state value
- React-router : How to trigger $(document).ready()?
- Shorten multiple lines of setState code in react
- How to access Reagent Component's children elements correctly?
- How put 'fontawesome' inside a react-datepicker in input?
- How to work with FileReader 'synchronously' in react/redux
- "[ts] Cannot find module 'react'" in spite of "npm install"
- converting jQuery to useEffect
- Check jshint errors before npm run build
- Hiding Navbar component with with React Router
- Warning when changing controlled input value in React
- TypeError: Cannot read properties of undefined (reading 'value') for a input within a form
- react-bootstrap set external link without active
- Two React-Select dropdowns resetting each other
- How to display data from an API based on filter?
- Cant access store with mapStateToProps