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 }


Related Query

More Query from same tag