title: React Fetch Returning Unusable __proto__ objects
body: <p>I am trying to get to the <code>special_abilities</code> array at the following api endpoint: <a href="http://www.dnd5eapi.co/api/monsters/1" rel="nofollow noreferrer">http://www.dnd5eapi.co/api/monsters/1</a></p>
  
  <p>Here is my container component:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link } from 'react-router';
  import MonsterSpecialAbilities from '../components/MonsterSpecialAbilities'
  
  class MonstersContainer extends Component {
    constructor(props) {
      super(props)
      this.state = {
        monster: {},
        number: Math.floor((Math.random())*325)
      }
      this.handleRandomClick = this.handleRandomClick.bind(this)
    }
  
    componentDidMount() {
      fetch(`http://www.dnd5eapi.co/api/monsters/${this.state.number}`)
        .then(response =&gt; response.json())
        .then(responseData =&gt; {
          this.setState({ monster: responseData })
        })
    }
  
    render() {
      let spec_abilities;
      spec_abilities = this.state.monster.special_abilities.map((ab) =&gt; {
        return(
          &lt;MonsterSpecialAbilities
            desc={ab.desc}
          /&gt;
        )
      })
      return(
        &lt;div&gt;
          {this.state.monster.name}
          {spec_abilities}
        &lt;/div&gt;
      )
    }
  }
  
  export default MonstersContainer
  </code></pre>
  
  <p>Right now the <code>.map</code> function breaks my components, and I get the console error: <code>Uncaught TypeError: this.state.monster.special_abilities.map is not a function</code>. I tried accessing the array by trying to access <code>this.state.monster.special_abilities[0]</code>, but this returns as <code>null</code>, leading me to believe that it is an invalid array.</p>
  
  <p>I have tried to create a state name <code>monster_special_ability</code> and manually set the array in the following way:</p>
  
  <pre><code>  componentDidMount() {
      fetch(`http://www.dnd5eapi.co/api/monsters/${this.state.number}`)
        .then(response =&gt; response.json())
        .then(responseData =&gt; {
          this.setState({ monster: responseData })
          this.setState({ monster_special_abilities: responseData.special_abilities })
        })
    }
  </code></pre>
  
  <p>I have tried putting debuggers in the <code>setState</code> function, and typing in <code>responseData.special_abilities</code> into the console returns the array that I want, but after the state is set, it seems that the array is not usable (it becomes a <strong>proto</strong>:object)</p>