themoviedb api Search Movie

Question

I'm stuck. I am using movie api for search movie. I have done the api part. But when I type a random nonsense word in the search section, my application gives an error because there is no such movie. How can I get past this? I am sharing my codes below.

Thats movie area;

 <div>
      <h4>{movie[0].title}</h4>
      <img
        src={`${base_URL}${movie[0].poster_path}`}
        alt={movie[0].title}
      />
    </div>

Thats search from

<label>
      <span>Search Film:</span>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
    </label>

Thats States

 const [movie, setMovie] = useState([{ title: "The Matrix Resurrections" }]); 

 const [search, setSearch] = useState("The Matrix Resurrections");

movie1

movie2

myError when i type "sadsafasfas" search bar

Answer 1

That is because the response you got from searching "nonsense" value using themoviedb api returning an empty object. To get through this, you can use a conditional component that checks the value of movie[0]. Your code can be written like this

<div>
{
   movie[0] ?
     <>
      <h4>{movie[0].title}</h4>
      <img
        src={`${base_URL}${movie[0].poster_path}`}
        alt={movie[0].title}
      /> 
     </>
       :
     <>
      <h4>Sorry, movie not found</h4> //your component if nothing returned from api
     </>
 }   
</div>