title: Unhandled Rejection (TypeError): Invalid attempt to destructure non-iterable instance
body: <p>I am trying to learn the map method. If I use this syntax <code>response.data.map(d =&gt;</code> I am able to iterate data array and see the results, but if I use this syntax <code>response.data.map(([label, CustomStep]) =&gt; {</code>, I am getting the error below:</p>
  
  <pre><code>Unhandled Rejection (TypeError): Invalid attempt to destructure non-iterable instance
  </code></pre>
  
  <p><strong>Can you tell me how to fix it, so that in future I will fix it myself?</strong></p>
  
  <p>Providing my code snippet below:</p>
  
  
  
  <pre class="lang-or-tag-here prettyprint-override"><code>axios
  .get('http://world/sports/values')
  .then(response =&gt; {
      console.log("sports---&gt;", response.data.map(d =&gt; d.customFieldValueName));
      //this.setState({ playerRanks: response.data.map(d =&gt; d.customFieldValueName) });
      // es6 map
      //Unhandled Rejection (TypeError): Invalid attempt to destructure non-iterable instance
      this.setState({
          playerRanks: response.data.map(([label, CustomStep]) =&gt; {
              label.customFieldValueName
          })
      })
  })
  </code></pre>
  
  <p><strong>update 1:</strong> </p>
  
  <p>hey, I saw in console, data is an array inside that there are so many objects</p>
  
  
  
  <pre class="lang-or-tag-here prettyprint-override"><code> data: Array(19)
          [
              {
                  "customFieldValueCode": "player1",
                  "customFieldValueName": "player1",
                  "isActive": "Y"
              },
              {
                  "customFieldValueCode": "player 2",
                  "customFieldValueName": "player 2",
                  "isActive": "Y"
              }
          ]
  </code></pre>