Error trying to get API payload using Reactjs and Typescript

Question

I'm trying to get and store an API payload in state but i keep getting this error

Error: Objects are not valid as a React child (found: object with keys {page, results, total_pages, total_results}). If you meant to render a collection of children, use an array instead.

The error appears when I try to store data in state but works fine when it is logged to console. The data schema has been declared as shown thus

export interface TrendingMovieModel{
    page: number;
    results: TrendingMovieResultModel[];
    total_pages: number;
    total_results: number;
}

interface TrendingMovieResultModel{
    video: boolean;
    vote_average: number;
    overview: string;
    release_date: string;
    adult: boolean;
    backdrop_path?: string; 
    id: number;
    genre_ids?: number[]; 
    vote_count: number;
    original_language: string;
    original_title: string;
    poster_path?: string;
    title: string;
    popularity: number; 
    media_type: string;
}

The react code


const Moviflix = () => {
    const [movies, setMovies] = useState<TrendingMovieModel>();

    let movie: [] = [];
  useEffect(() => {    
    fetch(`${baseUrl}trending/all/day?api_key=${API_KEY}`)
    .then(response => response.json())
    .then(data => {
      //console.log(data.page);
      //movie = data.response;
      //console.log(data.results)
      setMovies(data)
    }) 
    .catch(err => console.log(err));
  })

  return (
    <div className="App">
      <header className="App-header">
        <Nav /> 
      </header>
      {movies}

pls how can I successfully store this in state?

ChiefMcFrank · Accepted Answer · 2022-01-29 23:38:14Z

3

The error isn't related to setting the state, it's related to {movies} in your return statement.

React won't render a plain object. You need to map its values to valid components and render those. For example:

movies.results.map((movie) => 
<div>
  <h1>{movie.title}</h1>
  <p>Released: {movie.release_date}</p>
  <p>{movie.overview}</p>
</div>
);

answered Jan 29, 2022 at 23:38

ChiefMcFrank

7914 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error trying to get API payload using Reactjs and Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related