title: React Native - how to use map function on an object
body: <p>I'm creating an APP that get some data from fetch function. No problem here. The array has the data correctly. I'm doing it like this:</p>
  
  <pre><code> constructor(){
      super()
      this.state = {
        fetching: false,
        api: []
      }
    }
  
  componentWillMount(){
      this.setState({ fetching: true })
  
      api.getMonuments().then(res =&gt; {
        this.setState({
          api: res,
          fetching: false
        })
      })
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/8qKJL.jpg" rel="nofollow noreferrer">I got this data: an array of 4 objects</a></p>
  
  <p>Then I want to pass that data to another scene. I'm doing it like this:</p>
  
  <pre><code>&lt;View style={styles.contentContainer}&gt;
        &lt;TouchableHighlight
          style={[styles.button, {marginBottom:0}]}
          onPress={() =&gt; navigate('Monumento', this.state.api)}
          underlayColor='#000'
        &gt;
          &lt;View style={styles.buttonContent}&gt;
            &lt;Animatable.Text
              style={styles.buttonText}
              animation="bounceInLeft"
              duration={1500}
            &gt;
            Click here!
            &lt;/Animatable.Text&gt;
          &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
      &lt;/View&gt;
  </code></pre>
  
  <p>On the other scene I get that data with the navigation.state.params but the problem now is that there is no more an array with 4 objects in it, but instead there is an object that have 4 objects in it...if I console log the data <a href="https://i.stack.imgur.com/Tx6M4.jpg" rel="nofollow noreferrer">that is what's appears</a></p>
  
  <pre><code>render(){
  
      const api = this.props.navigation.state.params;
  
      console.log('API:', api)
      ...
  </code></pre>
  
  <p>Now I want to use the map function but I can't because 'api' is not a function...How can I workaround this? </p>