score:4
Accepted answer
i suspect its because you're not covering a state when listproduct
is null
. when it loads, it immediately renders, as it's getting your product data, so products
can be empty, and the .find()
would return a null
, then you're trying to render listproduct.title
while it's null
. ideally, your render should check for listproduct
being available or not.
even better, have a few states of your component, like loading data, showing data, no data.
<card>
{ datastatus === "loaded" &&
<card.title>{person.name}</card.title>
}
{ datastatus === "loading" &&
<card.loader>loading...</card.loader>
}
{ datastatus === "error" &&
<card.error>sorry, we had an oopsie...</card.error>
}
{ datastatus === "empty" &&
<card.empty>looks like we're missing something...</card.empty>
}
</card>
further explanation and code examples here: https://davidlozzi.com/2021/05/14/keeping-react-components-state-top-of-mind/
Source: stackoverflow.com
Related Query
- Refresh page after submit form in React
- Automatically refresh the page after saving the edited form in React
- How to open pop up modal when form submit sucessfully and hide pop after 2 mintues and redirect to another page in react js?
- React - clearing an input value after form submit
- Basic React form submit refreshes entire page
- React Router - Stay at the same page after refresh
- How to test function and inner statement after form submit handler in jest/enzyme react
- Redirect to URL after form submit in React
- "this" is undefined for a form after submit but not for button in react
- Redirect and refresh page on form submission in React frontend
- Redirect to website after form submit in react
- React useEffect doesn't dispatch the redux action after page refresh
- Refresh page after and call a function automatically in react
- React Modal Updater doesn't refresh page after setState()
- React Clear Form Fields After Submit
- React how to run a function only once, after page enter or refresh
- React useReducer hook state lost after page refresh
- How can I on Submit my Form redirect the Results to another Page in React
- Redirect to another page after form submit
- React - not refresh page after post with error response
- React js to refresh page after onClick has been called
- React hook submit form after setState
- React refresh the page after delete button
- React component not render anything, except after I refresh page
- Preventing refresh page on submit in React
- How can I refresh a list in one component after form submit in another component that shares same parent?
- form submit re-renders page in react
- React Router - Preserve current route after page refresh
- React component content disappears after page refresh
- React form not displaying the correct inputs on the screen after I click submit button
More Query from same tag
- Unexpected evaluation result of image source in ReactTestUtils
- JS: Sort object array by creating a kind of map
- Redux-Saga takeEvery for multiple actions and one task
- How to correctly write FormData in my React app?
- Error server Error: Actions must be plain objects. Use custom middleware for async actions
- react-router 4 doesn't display components
- firebase auth.sendSignInLinkToEmail method is not working
- Is there a way to access router history from inside an epic aside?
- I can't access a function in another file
- How do I apply a local custom font to Stripe Elements?
- Expo QR code not showing for a React Native App
- Is there some way to validate redux-form in a custom input?
- Put request 403 error django restframework
- How to refactor class component to functional(have to rerender, got undefined )
- how to update a object state?
- Blank page after deployment - React app with node
- How to solve `React Hook useEffect has a missing dependency` of `react-hooks/exhaustive-deps`?
- Prop sharing between components
- fetch() POST Request, data becomes object key
- Web App runs inside Webview and installed like a native App
- Clicking component inside renderHeader prop for MUI Data Grid Pro changes the sortModel
- react-styled-flexboxgrid different config for different viewport
- React test onchange dom not updating?
- Error when running tests on react project
- How to change the selected table row background color with React
- Function passed as props not a function
- How to use @apply in a react component with css modules
- 'Access-Control-Allow-Origin' error when getting data from the API with Axios (React)
- pass props to new page via react-router Link
- Send post request on Google API using javascript on browser