TypeError: undefined is not a function (near '...data.map...')

Question

I updated my code thanks to your help. When I launch the app with Expo, the opening works but I lost my scan icon which does not appear in my screen. This icon appeared previously. The idea is to scan some barcodes in order to display relevant data stemming from products.

Here is my new code:

import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Button,
  AsyncStorage,
} from "react-native";
import { useNavigation } from "@react-navigation/core";
import { TouchableOpacity } from "react-native-gesture-handler";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native-paper";

function ProductsScreen() {
  const navigation = useNavigation();
  const [data, setData] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const data = await AsyncStorage.getItem("userData");

      setData(data);
      setisLoading(false);
    };
    fetchData();
  }, []);

  console.log(data);
  return isLoading ? (
    <ActivityIndicator />
  ) : (
    <>
      {data ? (
        <FlatList
          data={dataArray}
          keyExtractor={(item) => item.name}
          renderItem={({ item }) => (
            <>
              <Text>{item.brand}</Text>

              <View style={styles.scan}>
                <MaterialCommunityIcons
                  name="barcode-scan"
                  size={40}
                  color="black"
                  onPress={() => {
                    navigation.navigate("CameraScreen");
                  }}
                />
              </View>
            </>
          )}
        />
      ) : null}
    </>
  );
}
export default ProductsScreen;

I would appreciate your comments please.

Make sure AsyncStorage.getItem("userData"); is returning something and also it looks like you might need JSON.parse() — Akshay
– Akshay, Commented Jun 5, 2020 at 16:19
What are you expecting the userData item to contain? Seems like it may be undefined and you're not accounting for that case. — Jacob
– Jacob, Commented Jun 5, 2020 at 16:19
There's no return in data.map, change the curly braces to parenthesis or add the return statement before <> — Al Hill
– Al Hill, Commented Jun 5, 2020 at 16:24
Your key={index} will be rendered as text since it is outside of a tag. Instead of just <> you need <React.Fragment key={index}>, or better, instead of index use a unique ID from your data object. — jdaz
– jdaz, Commented Jun 5, 2020 at 16:29

Dipesh KC · Accepted Answer · 2020-06-05 16:16:00Z

1

You could use ? (optional chaining) to confirm data doesnt yield to undefined before mapping.

data?.map((data, index) => {return <>....</>}

answered Jun 5, 2020 at 16:16

Dipesh KC

2,4631 gold badge19 silver badges20 bronze badges

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

Comments

Tony Nguyen · Accepted Answer · 2020-06-07 13:54:51Z

0

You need to return from data.map function to render the array items

return isLoading ? (
    <ActivityIndicator />
  ) : (
   <>
    {data?.map((data, index) => {
      return <View key ={index}>
        <Text> {data.products_name_fr} </Text>
        <Text> {data.brands} </Text>
        <Text> {data.image_url} </Text>
        <View style={styles.scan}>
          <MaterialCommunityIcons
            name="barcode-scan"
            size={40}
            color="black"
            onPress={() => {
              navigation.navigate("CameraScreen");
            }}
          />
        </View>
      </View>;
    })}
    </>
  );

Or short-hand of return

return isLoading ? (
    <ActivityIndicator />
  ) : (
  <>
    data?.map((data, index) => (
      <View key ={index}>
        <Text> {data.products_name_fr} </Text>
        <Text> {data.brands} </Text>
        <Text> {data.image_url} </Text>
        <View style={styles.scan}>
          <MaterialCommunityIcons
            name="barcode-scan"
            size={40}
            color="black"
            onPress={() => {
              navigation.navigate("CameraScreen");
            }}
          />
        </View>
      </View>;
    ))
   </> 
  );

edited Jun 7, 2020 at 13:54

answered Jun 5, 2020 at 16:16

Tony Nguyen

3,49814 silver badges20 bronze badges

7 Comments

Yoni Over a year ago

Thanks for your message.

Yoni Over a year ago

I tried but I have still the same error message (undefined is not a function (near '...data.map'

Yoni Over a year ago

I have the same error displayed in my screen: TypeError: undefined is not a function('near ...data.map...'). Any idea to fix this issue please?

Tony Nguyen Over a year ago

Please check my updated answer, try it and update your question with updated code if you still get the issue.

Yoni Over a year ago

Thanks Tony, I just updated my code. thanks for your help. I used a FlatList method and it works but I lost a precious icon to scan my products

|

Yoni · Accepted Answer · 2020-06-05 18:51:38Z

I changed my code like this but I have the same error. Besides, the part of code which begins from: const styles=Stylesheet.create seems to be not active

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Button, AsyncStorage } from "react-native";
import { useNavigation } from "@react-navigation/core";
import { TouchableOpacity } from "react-native-gesture-handler";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native-paper";
import axios from "axios";

function ProductsScreen() {
  const navigation = useNavigation();
  const [data, setData] = useState([]);
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const data = await AsyncStorage.getItem("userData");

      setisLoading(false);
      setData(data);
    };
    fetchData();
  }, []);

  return isLoading ? (
    <ActivityIndicator />
  ) : (
    <>
      {data?.map((data, index) => {
        return (
          <>
            key ={index}
            <Text> {data.products_name_fr} </Text>
            <Text> {data.brands} </Text>
            <Text> {data.image_url} </Text>
            <View style={styles.scan}>
              <MaterialCommunityIcons
                name="barcode-scan"
                size={40}
                color="black"
                onPress={() => {
                  navigation.navigate("CameraScreen");
                }}
              />
            </View>
          </>
        );
      })}
    </>
  );

  const styles = StyleSheet.create({
    products: {
      alignItems: "center",
      justifyContent: "center",
    },

    scan: {
      marginLeft: 30,
      position: "absolute",
      bottom: 0,
      right: 20,
      marginBottom: 60,
      marginRight: 30,
      padding: 10,
      borderRadius: 10,
      backgroundColor: "#ff9234",
    },
  });
}
export default ProductsScreen;

Yoni · Accepted Answer · 2020-06-05 19:02:19Z

0

I changed a little bit my code and I got another type of error : Invariant violation: Text strings must be rendered within a component. I will really appreciate your comments and support to fix this

return isLoading ? (
    <ActivityIndicator />
  ) : (
    <>
      data?.map((data, index) => (
      <>
        <Text> {data.products_name_fr} </Text>
        <Text> {data.brands} </Text>
        <Text> {data.image_url} </Text>
        <View style={styles.scan}>
          <MaterialCommunityIcons
            name="barcode-scan"
            size={40}
            color="black"
            onPress={() => {
              navigation.navigate("CameraScreen");
            }}
          />
        </View>
      </>
      ))
    </>
  );
}

answered Jun 5, 2020 at 19:02

Yoni

231 silver badge5 bronze badges

1 Comment

Tony Nguyen Over a year ago

Don't make new comment, Just updated your question.

Obot Ernest · Accepted Answer · 2021-05-05 19:46:32Z

0

In the useEffect, set the data as array. Example

const = [data, setData] = useState([]); // do this in your state

setData([data]); //do this in your useEffet hook

answered May 5, 2021 at 19:46

Obot Ernest

50214 silver badges23 bronze badges

Collectives™ on Stack Overflow

TypeError: undefined is not a function (near '...data.map...')

5 Answers 5

Comments

7 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

7 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related