title: ReactJS: Using state causes error rendering heading
body: <p><code>console.log()</code> inside <code>componentDidMount()</code> works with no problem.
  This works as expected with logging working correctly:
  <a href="https://i.stack.imgur.com/98DHo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/98DHo.png" alt="working console.log"></a></p>
  
  <p>Here is the problem; inside return for <code>App</code> it's not letting me render the <code>&lt;h1&gt;</code>:</p>
  
  <pre><code>  render() {
      return (
        &lt;div className="App"&gt;
          &lt;Navbar /&gt;,
          &lt;h1&gt;{this.state.users.data[0].images.original.webp}&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/W4I4N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W4I4N.png" alt="enter image description here"></a>
  This code however works without <code>&lt; h1&gt;</code>:</p>
  
  <pre><code>   import React, { Component } from "react";
      import Navbar from "./components/Navbar";
      import "./App.css";
      import axios from "axios";
  
  class App extends Component {
    state = {
      users: [],
      loading: false
    };
  
    async componentDidMount() {
      this.setState({ loading: true });
  
      const res = await axios.get(
        "http://api.giphy.com/v1/stickers/search?q=monster&amp;api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O"
      );
  
      this.setState({ users: res.data, loading: false });
      console.log(123);
      console.log(this.state.users.data[0].images.original.webp);
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Navbar /&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Please help me understand why this is happening</p>