componentDidMount and constructor : <pre><code> class ProductsIndex extends Component {

   constructor (props){
     super(props);

     console.log(this) // #1. this logs ProductsIndex component

     fetch('someUrl')
        .then(res =&gt; res.json())
        .then(res =&gt; console.log(this)) // #2. this logs ProductsIndex component

     fetch('someUrl')
        .then(res =&gt; res.json())
        .then(console.log)  // #3. this logs [{..},{..},{..},{..}]
   }


   componentDidMount(){
     fetch('someUrl')
        .then(res =&gt; res.json())
        .then(console.log)  // #4. this logs [{..},{..},{..},{..}]

   }
</code></pre>

<p>As shown in the code above, both #1 and #2 point to same <strong><em>this</em></strong>. And also as shown, both #3 and #4 returns <strong>same</strong> array. However, why the code below doesn't work??</p>

<pre><code> class ProductsIndex extends Component {

   constructor (props){
     super(props);

     fetch('someUrl')
       .then(res =&gt; res.json())
       .then(arr =&gt; {
          this.state = {
              array: arr
          }
       })
    }
</code></pre>

<p>It throws an error saying that <strong>this.state</strong> is <strong>null</strong> and I really don't understand why.</p>

<p>Below code is the solution. could anyone please explain what exactly the difference is??</p>

<pre><code> class ProductsIndex extends Component {

   constructor (props){
     super(props);

     this.state = {
       array: []
     }
   }

   componentDidMount(){
      fetch('someUrl')
         .then(res =&gt; res.json())
         .then(arr =&gt; {
            this.setState({
                array: arr
             })
          })
    }
</code></pre>
