Displaying an array of objects in React native using map method

Question

I have following component where I want to display data from an API, ShopScreen.js. I retrieve data with useEffect hook from API in service folder, and everything is ok, the json data is being loaded into data variable from useState hook, when I console.log it. I have problem to the display data from this variable with map method. I get the error: Cannot read property 'map' of undefined. Can spot somebody where the problem is? ShopScreen.js:

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { fetchShops } from '../services/fetchShops';

const ShopsScreen = props => {
    const [data, setShops] = useState({});

    useEffect(() => {
        fetchShops()
            .then(response => response.json())
            .then(data => setShops(data));
    }, []);

    return(
        <View>
            <Text>The Shops Screen!</Text>
                {data.result.map(shop => {return (<Text>{shop.address}</Text>)})}
        </View>
    );
};

export default ShopsScreen;

My service for fetching data is fetchShops.js

export const fetchShops = () => {
    const URL = `https://vilvumbiyl.execute-api.eu-west-1.amazonaws.com/Dev/store/MEBD/list`;
    return fetch(URL)
}

Try something like this {data.result && data.result.map(shop => {return (<Text>{shop.address}</Text>)})} — Sajeeb Ahamed
– Sajeeb Ahamed, Commented Apr 17, 2020 at 19:05
Check it the data.result is available or not before using map. — Sajeeb Ahamed
– Sajeeb Ahamed, Commented Apr 17, 2020 at 19:09
Aha because of asynchronous call. I first time see this syntax. Thanks. — Ivana
– Ivana, Commented Apr 17, 2020 at 19:12

Marco Caldera · Accepted Answer · 2020-04-17 19:26:05Z

1

useEffect without any params is equal to componentDidMount and for this reason, is called after the render.

So, the first time your jsx code is called, data.result.map is undefined and only after the re-render, do to the response of fetchShops(), it has a value.

You simply need to check the value like this:

data.result && data.result.map()

answered Apr 17, 2020 at 19:26

Marco Caldera

5052 gold badges7 silver badges17 bronze badges

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

Comments

Henfs · Accepted Answer · 2020-04-18 00:20:43Z

1

You can try:

const [data, setShops] = useState({result : {}});

or test data.result before use map on it.

ShopsScreen returns your view(JSX) before you get answer from your rest API. The result is null. You get the exception.

edited Apr 18, 2020 at 0:20

Henfs

5,45912 gold badges33 silver badges48 bronze badges

answered Apr 17, 2020 at 19:18

Taliane Tchissambou

211 bronze badge

Collectives™ on Stack Overflow

Displaying an array of objects in React native using map method

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