Display API data using Axios and a list in React

Question

I'm attempting to make a request to this https://www.themoviedb.org/documentation/api API in a React project and then display JSON data on my site.

I'm using Axios to make the request and I have been able to make the request and get the appropriate JSON data and console.log it or view it in the React tools in Firefox. However, I am having difficulty displaying the data in a ul. Initially I had an error pertaining to having a unique key for each list item, and I have since resolved that (or so I believe).

Here's my request and how I am attempting to render the data:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=*apikeyhere*&language=en-US&page=1`)
      .then(res => {
        const posts = res.data.results.map(obj => [obj.title, obj.overview]);
        this.setState({ posts });
      });
  }

/*  render() {
    return (
      <div>
        <h1>Movie API data</h1>
        <ul>
          {this.state.posts.map(post =>
              <li key={post.toString()}>{post.title}</li>
            )}
        </ul>
      </div>
    );
  }
}
*/

  render() {
    return (
      <ul>
        {this.state.posts.map(function(post, index){
          return (
              <div key={index}>
                <h1>{post.title}</h1>
                <p>{post.overview}</p>
              </div>
            )
          }
        )}
      </ul>
    );

  }

}

As you can see I attempted multile approaches to rendering this. What's wrong with my code and why isn't the JSON data rendering in the ul on my site?

Your code looks fine. Can you setup a jsFiddle or codepen that recreates the problem? Just from looking at your code, it looks like the only way it won't render is if there isn't any data in this.state.posts. — Chase DeAnda
– Chase DeAnda, Commented Dec 7, 2017 at 22:51
Oh wait, this isn't the full app right? You need to have ReactDOM.render( <App/>, document.getElementById('root')); somewhere that will actually render your react app. — Chase DeAnda
– Chase DeAnda, Commented Dec 7, 2017 at 22:52
If you add console.log(posts) before you setState, what is the output? Do you see an array of data? — Chase DeAnda
– Chase DeAnda, Commented Dec 7, 2017 at 22:54

Slawa Eremin · Accepted Answer · 2017-12-07 22:55:37Z

5

I think, you have an error inside success fuction ({title: obj.title, overview: obj.overview})

componentDidMount() {
    axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=*apikeyhere*&language=en-US&page=1`)
      .then(res => {
        const posts = res.data.results.map(obj => ({title: obj.title, overview: obj.overview}));
        this.setState({ posts });
      });
  }

answered Dec 7, 2017 at 22:55

Slawa Eremin

5,42521 silver badges29 bronze badges

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

1 Comment

Nick Kinlen Over a year ago

That did the trick. Looks like the whole problem was me using an array there instead of an object with key/value pairs. Thanks.

Collectives™ on Stack Overflow

Display API data using Axios and a list in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related