score:0
you need to check for moviedetails
to be there to actually render it.
i suggest you do something like this:
const moviedetails = (props) => {
const [moviedetails, setmoviedetails] = usestate(null)
useeffect(() => {
// get your data asynchronously
setmoviedetails(data)
}, []) // when the component mounts
return !moviedetails
? <div>loading...</div>
: (
<div>
<h1>{moviedetails.title}</h1>
<h3>{moviedetails.overview}</h3>
{moviedetails.genres[0] && <h1>{moviedetails.genres[0].name}</h1>}
<link to="/">home</link>
</div>
)
}
also, you can create another state in case there are errors while fetching the data. and bonus points: abstracting this away in a general hook called i.e. usefetchdata
that returns something like { data, loading, error }
Source: stackoverflow.com
Related Query
- Get type error cannot destructure property as it is undefined in React
- when I type my react js component it is doing well but when i reload the browser it gives me error Cannot read property 'value' of undefined
- D3 pie chart: Uncaught Type Error - Cannot read property 'pie' of undefined
- Error Cannot read property 'left' of undefined in React Semantic UI Popup with Styled Component
- React DnD with HOC draggable elements throw Cannot set property 'props' of undefined error
- Cannot read property 'push' of undefined - React error
- react component error Cannot read property of undefined
- React fullcalendar error cannot read property 'seg' of undefined
- TypeError: Cannot read property 'name' of undefined react error
- React router error Cannot read property 'forEach' of undefined
- Error when trying to use the result of a function, typeError: Cannot read property 'map' of undefined in React
- Error adding Google Maps with react - TypeError: Cannot read property 'maps' of undefined
- Can't resolve the error Cannot read property 'map' of undefined in react js
- Cannot read property 'map' of undefined in react datatable error
- Cannot read property formatMessage of undefined error message from react code
- React Redux error Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
- Getting Type error as cannot read property undefined
- I get the error : - Unhandled Rejection (TypeError): Cannot read property 'id' of undefined in React Application
- React file throws error Cannot read property 'style' of undefined only when I refresh the page
- Changing the react-leaflet layer url by mutating react state throws error -> TypeError: Cannot read property 'call' of undefined
- Error in React CRUD app : TypeError: Cannot destructure property 'id' of 'this.props.event' as it is undefined
- an error whilst working with react app - Cannot read property 'photo' of undefined
- RelayObservable: Unhandled Error TypeError: Cannot read property 'subscribe' of undefined in React and Relay
- React app is throwing error Cannot read property 'setState' of undefined in nested promise
- React JS - Error Cannot read property 'map' of undefined when rendering a Table
- React Router Error Cannot read property 'pathname' of undefined
- React Error TypeError: Cannot read property 'name' of undefined
- Cannot set property 'color' of undefined getting this error in React
- I get error of TypeError: Cannot read property 'content' of undefined in React
- React native cannot read property 'navigate' is undefined error
More Query from same tag
- Uncaught (in promise) Error: Network Error at createError
- How do I stop timer in react?
- Redux state showing undefined data inserted in stateStore using axios
- List folder contents with ReactJS
- How to use a Babel script's object inside a Javascript?
- How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
- ReactJS - How can I implement pagination for react with keep state when route change?
- How do you test for the non-existence of an element using jest and react-testing-library?
- Material-table ReactJs toggle detailPanel open/closing from actions
- Change color of specific words if they appear in the editor
- Triggering a parent function from child using props
- Webpack - Require Images Using File-Loader
- I cannot detach a firebase listener in React
- React component with dynamically created function
- Getting illegal access error after upgrading the reactJS
- Update the data from spliced array of object
- onClick on <li> does't trigger
- React, the state is triggered for all blocks containing the style, but it needs for only one
- Storing select option input value in React component inside MongoDB - MERN fail. Stores it as empty string
- What is the best way to test methods that traverse the react components
- React setState not updating state immediately
- What is withRouter for in react-router-dom?
- Arrow Function React Component different from "equivalent" counterpart
- Links not being drawn on force layout d3
- How to check if a video source has audio in ReactJS?
- How to set global style for a react-select.js
- Highcharts column animation issue
- Bootstrap React tooltip not working with p or span tag only work with button?
- How to change initState in rootReducer in Redux
- How can I replace specific strings within an object?