React.map defined but says undefined

Question

UPDATE:

by the way I'm already defined the data with the response in setState({ fetchedData: responseJSON.data })

I'm just getting the response data in setState called fetchedData: [] I'm wondering why I'm getting an error while I'm fetching movies from this.state.fetchedData even though if I did console log for this.state.fetchedData I'm getting this data

{
"data":{
    "title": "The Basics - Networking",
    "description": "Your app fetched this from a remote endpoint!",
        "movies": [
          { "id": "1", "movieTitle": "Star Wars", …},
          { "id": "2", "movieTitle": "Back to the Future", …}
          { "id": "3", "movieTitle": "The Matrix", …}
          { "id": "4", "movieTitle": "Inception", …},
          { "id": "5", "movieTitle": "Interstellar", …}
        ]
   }
}

Also if I did console log for this.state.fetchedData.movies I'm getting response

[
          { "id": "1", "movieTitle": "Star Wars", …},
          { "id": "2", "movieTitle": "Back to the Future", …}
          { "id": "3", "movieTitle": "The Matrix", …}
          { "id": "4", "movieTitle": "Inception", …},
          { "id": "5", "movieTitle": "Interstellar", …}
]

I have tried to use map it doesn't work here's my code

const allNews = this.state.fetchedData.movies.map((data) =>
  <ul>
      <li key={data.id}>{data.total}</li>
  </ul>
);

I'm getting error says Cannot read property 'map' of undefined

Then I did a big research I got I should use object.key here's my code:

const getData = this.state.fetchedData.map((items, index) => {
    return (
        <ul key={index}>
            {Object.keys(items.movies).map((movie) => {
                return (
                    <li key={movie.id}>{key.movieTitle}</li>
                )
            })}
        </ul>
    )
});

I'm getting error says

this.state.fetchedData.map is not a function

I really don't know where's my problem even though if I console log the Data I'm getting correct response

Thank you guys for helping me

Answer 1

You are not traversing through your state correctly, this will solve your problem.

const allNews = this.state.fetchedData.data.movies.map((data) =>
  <ul>
      <li key={data.id}>{data.total}</li>
  </ul>
);

Answer 2

How is it that when printing this.state.fetchedData.movies you get { movies: [ ... ] } ? Going by the shape of this.state.fetchedData you should only get the array in movies , but are getting an object that has a movies key inside.

Have you tried this.state.fetchedData.movies.movies.map ? How is it that this.state.fetchedData.movies isn't only the movies array? If it's an object no surprise you can't call map on it.

When are you calling setState({ fetchedData: responseJSON.data }) ? When is this.state.fetchedData.movies.map called? How can you be sure the state is set with fetchedData in the initial render?