Access nested JSON data in ReactJS

Question

I try to get data from endpoint and get Error: Objects are not valid as a React child..If you meant to render a collection of children, use an array instead.

import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import axios from "axios";
import PropTypes from "prop-types";
import Movie from "./Movie/Movie";

    const Movies= () => {
      const history = useHistory();
      const [renderedMovies, setRenderedMovies] = useState([]);
    
      useEffect(() => {
        const requestOptions = {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization:
              JSON.parse(localStorage.getItem("tokenType")) +
              " " +
              JSON.parse(localStorage.getItem("accessToken")),
          },
        };
        axios
          .get("/movies", requestOptions)
          .then((response) => {
            setRenderedMovies(response.data);
          })
          .catch((err) => alert(err));
      }, []);
    
      return (     
          { renderedMovies && (
            <ul className="movies_list">
              {renderedMovies.map((movie) => (
                <Movie
                  key={movie.movieName}
                  startTime={movie.startTime}
                  finishTime={movie.finishTime}
                  duration={movie.duration}
                  author={movie.author}
                  movieDescription={movie.movieDescription}
                  movieCollection={movie.movieCollection}
                  clicked={() => history.push(`/movies/${movie.movieName}`)}
                />
              ))}
            </ul>
          )}
      );
    };
    
    Sessions.propTypes = {
        startTime: PropTypes.string.isRequired,
        finishTime: PropTypes.string.isRequired,
        duration: PropTypes.string.isRequired,
        author: PropTypes.string.isRequired,
        movieDescription: PropTypes.string.isRequired,
        movieCollection: PropTypes.string.isRequired
    };
    
    export default Movies;
    
    Movie.js
    import React from "react";
    import "./Movie.css";
    
    const Movie= (props) => {
      return (
        <li>
          <div onClick={props.clicked}>
            <div className="movie_details">
             <span>{props.movieName}</span>
              <span>{props.startTime}</span>
              <span>{props.finishTime}</span>
              <span>{props.duration}</span>
              <span>{props.author}</span>
              <span>{props.movieDescription}</span>
              <span>{props.movieCollection}</span>
              <span>{props.screenshots}</span>
            </div>
          </div>
        </li>
      );
    };
    
    export default Movie;

Here how looks that endpoint in postman:

http://localhost:8000/movies


  

 [
        {
            "movieName": "Titanic",
            "startTime": "2020-09-11T07:20:00.000+00:00",
            "finishTime": "2020-09-11T09:00:00.000+00:00",
            "duration": 100,
            "author": 
             {
             "Author1",
             "Author2"
             },
            "movieDescription": "description",
            "movieCollection": [ 
            {
            "timeMade": "2020-08-29T12:58:11.000+00:00",
            "category": "new"
            },
            {
            "timeMade": "2020-07-29T12:58:11.000+00:00",
            "category": "new"
            }],
            "id": 1
            },
            {
            "movieName": "Harry Potter",
            "startTime": "2020-09-11T07:20:00.000+00:00",
            "finishTime": "2020-09-11T09:00:00.000+00:00",
            "duration": 100,
            "author": 
             {
             "Author1",
             "Author2"
             },
            "movieDescription": "description",
            "movieCollection": [ 
            {
            "timeMade": "2020-08-29T12:58:11.000+00:00",
            "category": "new"
            },
            {
            "timeMade": "2020-07-29T12:58:11.000+00:00",
            "category": "new"
            }],
            "id": 2
        }
    ]

I try to get data from endpoint and get Error: Objects are not valid as a React child..If you meant to render a collection of children, use an array instead.

can you try removing the starting curlybraces inside your return? — Samu
– Samu, Commented Sep 2, 2020 at 9:42
they should not be there in Movies return. Also can you change your click function in Movie to: onClick={() => props.clicked()} — Samu
– Samu, Commented Sep 2, 2020 at 12:51
The problem is with accessing "author" and "movieCollection", because they are nested, any idea how access it? — Weronika Marunowska
– Weronika Marunowska, Commented Sep 2, 2020 at 13:43

bakar_dev · Accepted Answer · 2020-09-02 13:43:59Z

1

movieCollection is an array of objects. So use like this: CodeSandbox

<span>
     {props.movieCollection.map(
       ({ timeMade, category }) => timeMade + " " + category
     )}
</span>

answered Sep 2, 2020 at 13:43

bakar_dev

9965 silver badges13 bronze badges

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

2 Comments

Weronika Marunowska Over a year ago

Thanks a lot! and how to access "author"?

bakar_dev Over a year ago

author has an empty string in your data so it is blank

Collectives™ on Stack Overflow

Access nested JSON data in ReactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related