React and Axios fire twice (once undefined, once successfully)

Question

Following the React AJAX example, I created a JSX file whose purpose is to select and render a movie. As far as I know, I do everything here.

When I console.log the data in my rendering function, I get 2 results:

• Undefined
• Object (which I need, so it fits perfectly)

How can I filter out the Undefined string without doing any if / else logic in my rendering function? Iterating over the result will of course lead to an error for the first time, which will lead to the failure of my application.

What is the best way to handle this?

EDIT: Maybe the application will be displayed before the Axios call is made, in which case I have to execute the if / else statement?

Heres my JSX file:

import React from "react";
import axios from "axios";

export default class NetflixHero extends React.Component {
 constructor() {
    super();
    this.state = {
      movie: []
    }
 }
}

componentDidMount() {
  const apiKey = '87dfa1c669eea853da609d4968d294be';
  let requestUrl = 'https://api.themoviedb.org/3/' + this.props.apiAction + '&api_key=' + apiKey;
  axios.get(requestUrl).then(response => {
      this.setState({movie: response.data.results})
  });
}

render() {
  //Fires twice. Returns Undefined and an Object
  console.log(this.state.movie[0]);
  return(
   <div></div>
  )
}

Answer 1

. :

import React from "react";
import axios from "axios";

export default class NetflixHero extends React.Component {
 constructor() {
    super();
    this.state = {
      movie: []
    }
 }
}

componentDidMount() {
  const apiKey = '87dfa1c669eea853da609d4968d294be';
  let requestUrl = 'https://api.themoviedb.org/3/' + this.props.apiAction + '&api_key=' + apiKey;
  axios.get(requestUrl).then(response => {
      this.setState({movie: response.data.results})
  });
}

render() {
  //Loading...
  if( this.state.movie[0] === undefined ) {
      return <div>Loading...</div>
  }

  //Loaded successfully...
  return(
   <div> Movie loaded... [Do action here] </div>
  )
}

, , . this.state.movie = []. DidMount(), . .