title: I'm trying to get json objects to render in a list using REACT
body: <p>I'm fetching an API using REACT and trying to get the results to render in a list. I see the output in the console but it's not rendering on the page. I just want to of the objects to render. My REACT syntax is fairly new.</p>
  
  <pre><code>import React from "react";
  import { render } from "react-dom";
  import ReactDOM from "react-dom";
  
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: 10
      };
    }
  
    componentDidMount() {
      var component = this;
      var url;
  
      fetch("https://api.spacexdata.com/v2/launches")
        .then(function(response) {
          return response.json();
        })
        .then(function(json) {
          var data = json;
          console.log(data[0]);
          console.log("hi" + data[0].flight_number);
          component.setState({
            data: json
          });
        });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;elo{launchInfo}&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
      var launchInfo = this.state[0].data.flight_number || "";
    }
  }
  
  const docs = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, docs);
  </code></pre>