title: Undefined object when parsing from JSON - React
body: <p>Not sure if this is obvious or not, but please point this out if it is. **I am not an expert in React, but merely trying to learn to the best of my ability **</p>
  
  <p>I am trying to change a json into an object so I can actively parse through its text for output onto my webpage. Before, on regular JS,HTML, CSS I attempted this as  such...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// getting the json file and reading from it
  $.getJSON(...., function (tool) {
  
  ...
   
      myHTML += '&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;&lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;';
   
      
      
       myHTML += '&lt;h3&gt;Name: ' + tool.items[i].name + '&lt;/h3&gt;';
       
       ...</code></pre>
  </div>
  </div>
  </p>
  
  <p>This snippet ran fine and I was able to treat the json as a pure object parsing out what I needed inside. However, I cannot replicate this in react. **Again, I am not an expert in react. **</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class Test extends React.Component {
    constructor(props){
        super(props);
        this.state = {apiInfo: 'default', test: []};
        //  this.componentDidMount = this.componentDidMount.bind(this);
    }
   
    componentDidMount() {
      const that = this; // think of this as a promise request that is fufilled out
      fetch(...)
          .then(function(response) { //changes the object to a json object
              return response.json();
          })
          .then(function(jsonData) {
              // this.setState({ test: jsonObject });
              return JSON.stringify(jsonData);
              
              console.log(jsonData);
          })
          .then(jsonStr =&gt; { // same as the then(function etc, taking in the previous object
          
            this.setState({ apiInfo: jsonStr });
            jsonObject = JSON.parse(jsonStr);
  
            // console.log(apiInfo);
            console.log(jsonStr);
            console.log(jsonObject)
            console.log(jsonObject.ipads[1])
    
  
        });
       
  }
  
    render(){
        return(
                &lt;div&gt;
                    &lt;h1&gt;{JSON.stringify.toString(jsonObject.ipads[1])}&lt;/h1&gt;
                    &lt;p&gt;{this.state.apiInfo}&lt;/p&gt;
                &lt;/div&gt;
        );
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can clearly stringfy the json to make it print out the entire JSON and use console.log to call for parts of the json. Clearly, the object jsonObject is being filled. However again, I am not sure why I cannot replicate the same method of "item.tool[i].name..." in react. Thoughts?</p>