How to map an array of object in react native

Question

I am currently getting data which is an array of objects from my local storage in following manner:

const [dataList, setDataList] = useState();
const getLocalItem = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('somekey');
      const list = JSON.parse(jsonValue);
      setDataList(list);
      console.log("list: ", dataList);
      return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch (e) {
      // error reading value
    }
  }

<TouchableOpacity onPress={getLocalItem}>
    <Text>Get file</Text>
</TouchableOpacity>

Following is getting consoled:

list:  
{0: {…}, 1: {…}, default: Array(2)}
0: {userId: 1, id: 1, title: "optio reprehenderit", body: " molestiae ut ut quas "}
1: {userId: 1, id: 2, title: "qui est esse", body: " aperiam non debitis possimus qui neque nisi nulla"}
default: (2) [{…}, {…}]
__proto__: Object

Now I am trying to map through this data to display it on my screen:

{
    dataList?.map(function (item, index) {
        return (
            <Text>{item.userId}</Text>
        );
    })
}

But I am getting error:

dataList.map is not a function

lonecruisader · Accepted Answer · 2021-04-10 15:25:15Z

1

The dataList is an object and not an array. You cannot map through objects. And that's why you're getting this error.

You can use Object.values to get the value of object and consequently apply map on.

{Object.values(dataList).map(item => {
        return <Text>{item.title}</Text>;
      })}

edited Apr 10, 2021 at 15:25

lonecruisader

4385 silver badges13 bronze badges

answered Apr 10, 2021 at 4:24

Rohit Aggarwal

1,2182 gold badges16 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian · Accepted Answer · 2021-04-10 01:32:56Z

0

The map function can only be called on an array of values.

Solution:

[dataList]?.map(function (item, index) {
        return (
            <Text key={index}>{item.userId}</Text>
        );
    })

(also add a key to your child component when mapping).

edited Apr 10, 2021 at 1:32

answered Apr 10, 2021 at 1:21

Christian

3661 gold badge6 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to map an array of object in react native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related