React Native type error: this.props.data.map is not a function

Question

I am doing a single page app in react native. I want to display the fetch response in a list view. For accessing the response array i'm using map method but got the above error.The response from my server look like this

{
  "responseHeader": {
    "type": "314",
    "status": "200",
    "message": "Successfully found the profile"
  },
  "neighbourProfile": [{
    "no_of_mutual_friends": "0",
    "username": "Amith Issac",
  },
  {
    "no_of_mutual_friends": "0",
    "username": "Liz",
  }]
}

How to use map method here?And my app.js is as follows

app.js

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import Neighbour from './src/components/Neighbour';

 class App extends Component {
    state = { neighbours: [] };
    componentWillMount(){
        const myArray = 
        {"requestHeader":
        {
            "personal_id": "122334",
            "type":"314"
        }
        }
        fetch(" https://xxxxx",{
            method: 'POST',
            headers:{
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
           body: JSON.stringify(myArray)
        })
        .then((response) => response.json())
        .then((responseData) =>this.setState({neighbours: responseData}));

    }
    renderNeighbour(){
        return this.state.neighbours.map(neighbours =>
        <Neighbour key ={neighbours.username} neighbours={neighbours}/>
        );
    }
  render() {
    return (
      <ScrollView>
      {this.renderNeighbour()}
      </ScrollView>
    );
  }
}
export default App;

What wrong am i doing?

Answer 1

For your case, you have to use responseData.neighbourProfile to make it work:

.then((responseData) =>this.setState({neighbours: responseData.neighbourProfile}));

Since you only take neighbourProfile into account from your response data.

Answer 2

According to this answer , you need to do the following to map over a Javascript Object (like a Python dictionary).

Object.keys(someObject).map(function(item)...
Object.keys(someObject).forEach(function(item)...;

// ES way
Object.keys(data).map(item => {...});
Object.keys(data).forEach(item => {...});

This is because only Array s have a map method in Javascript; Object s do not have this method.

Answer 3

responseData should be an array only..

something like this :-

  responseData = [ { "no_of_mutual_friends": "0", "username": "Amith Issac", }, { "no_of_mutual_friends": "0", "username": "Liz", } ]; 

while the maps something like this.. usually we cannot use directly from this.state to map as it will become something else.. so, it's better if you assign a variable and get the value from the state..

 renderNeighbour(){ //this one const { neighbours } = this.state; //or this one let neighbours = this.state.neighbours; return neighbours.map((data) => <Neighbour key={data.username} neighbours={neighbours} /> ); }