i am trying to dynamically bind data to react native picker, the data is binding to the picker successfully , but i am having the following warning

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

this is the code below

import { StatusBar } from "expo-status-bar";
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import axios from "axios";
import { Picker } from "@react-native-picker/picker";

const App = () => {
  const [Users, setUsers] = useState([]);

  const [Name, setName] = useState([]);

  const [selectedValue, setSelectedValue] = useState("");

  useEffect(() => {
    fetchRegion();
  }, []);

  const fetchRegion = () => {
    axios
      .get(`https://jsonplaceholder.typicode.com/users`, {})
      .then(({ data }) => {
        setUsers(data);
      })
      .finally(() => {
       
      });
  };

  return (
    <View>



      <Picker
        selectedValue={Name}
        style={{ height: 40, width: 150 }}
        onValueChange={(itemValue, itemIndex) => {
          setName(itemValue);
        }}
      >
        {Users.map((Name, index) => {
          return <Picker.item label={Name.name} value={index} />;
        })}
      </Picker>
    </View>
  );
};



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

CodePudding user response：

This warning usually means import didn't work.

you can try import like:

import Picker from "@react-native-picker/picker";

or

import { Picker } from "@react-native-picker";

And just a side note, don't forget to give a key in a map loop.

return <Picker.Item key={Name.id} label={Name.name} value={index} />;