score:1
this.setState is an asynchronous function
and console.log("The prodcuts are", this.state.products) is a synchronous code
so it doesn't print the correct result
You can print the data in the callback function of this.setState
like this
this.setState({...}, () => {
console.log(...)
})
You should be able to get the correct result
And in the ProductListing component
I'm not sure when you're printing the console.log
because your data is being requested asynchronously and you're getting
and the rendering of the child component is not necessarily done after the request
So if you want to successfully print the data from the child component
either during the update lifecycle
or in the render function
Hope this helps you out
Source: stackoverflow.com
Related Query
- Why my state is not getting set inside class based component and it should work but it is not neither i am getting error
- Set loading state before and after an action in a React class component
- Is it a bad practice to use state in a React component if the data will not change? Should I use a property on the class instead?
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- Getting a state of from a component and show it as a value attribute inside a div?
- Getting TypeError: Cannot read property 'localeCompare' of undefined for my sortBy function in my React component and I'm not sure why
- Functional component definition inside class component's render() method, state resets when created through JSX, but not when called directly
- TypeScript errors in React Class Component property does not exist on type 'Readonly<{}>', not sure how to set types for state
- Why does my for loop not work inside my class before render method in React?
- Why the state is still showing Promise while using redux? and how should I access the array inside the result?
- State not getting set inside fetch inside useeffect
- Why my React component does not rerender when Set state was changed?
- Why am I getting an infinite loop inside the component as state is globally managed?
- Can not set and then modify the state of component
- Why my React component handler is executed at render time and will not work afterwhile?
- Why am I not able to set my state using useState and send the state to firebase realtime database at the same time?
- why is my state not being set in this component
- why is my state not resetting inside of a function in setInterval and useEffect
- why is a React class component converted to functional component with hooks not picking up state in event handler on document
- My state value should be re-rendering the whole component and that should put my other state value to default again but it's not happening
- How to make a react class component retain its state after login and change available routes based on the state currently available in the component?
- useEffect triggering when the component loads, and not when the state changes, as I have set it
- Why does not the background color get applied from props using state for a styled component div using react and typescript?
- Can't perform a React state update on an unmounted component and states are not getting updated
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- How to set React component state and props from browser
- why react should usually be a prod dependency and not dev-dependency
- Should I use redux-form store instead of component state and Redux custom store?
- How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest?
- Why is my react component not updating with state updates?
More Query from same tag
- React: validation on controllable input is not consistent
- render a component or render a video src embedded depending on screen size
- Ant Design - Modal with Datepicker (form)
- Inline CSS style block with React
- facing issues in npm install packages
- v16.6.0 or higher Context API not working when child is used in component that provides the context
- How fix : Meteor Method fired twice with onClick or onKeyPress with React
- react-router-dom Link - hide URL on hover
- How to save toggled tag to local storage in React JS?
- create react app not loading css background images in dev or build
- Framer motion Follow same duration on hover end
- React - how to use map to pass an array of options on input of type unform select
- How do I override bootstrap's mark style?
- How to solve the issue of a text cursor in a text input being automatically placed at the end of the input after a typed character has been inserted?
- React doesn't re-render component with new props when state changes
- Implementing radio list with text input in React js
- React - Redux: Testing actions dispatched inside other actions
- Map an array of objects with Typescript
- How to re-render parent component on child component's button click
- react: helping to understand specific currying use case
- Running React & Express in Docker without exposing multiple Ports
- Event handler for multiple checkboxes using this.bind?
- how to show every part of array in different form in react component
- Is this a typo in React docs or I am not able to understand it?
- How can i dispatch something with react+redux+router from nav item without render anything?
- React efficiently update (render) new data
- TypeScript: What type do I set a value that is to be compared with a list of types?
- React Warning: Unknown prop `valueAsNumber` on <input> tag
- How to render a component inside Formik form
- Uncaught ReferenceError: Cannot access createAsyncThunk before initialization within a redux toolkit slice