Estoy creando un componente mapeado con algunos datos ficticios en la interfaz. Solo tengo algunos datos rápidos que estoy extrayendo de un archivo js
export const userInputs = [ { id: 1, label: "First Name", type: "text", placeholder: "Remy" }, { id: 2, label: "Surname", type: "text", placeholder: "Sharp", }, { id: 3, label: "Email", type: "email", placeholder: "remysharp@gmail.com", } ]Luego estoy alimentando esto como un accesorio de 'entradas', como tal
<UserProfile inputs={userInputs}/>Tengo esto pasado como accesorios para mi componente, sin embargo, cuando trato de mapear esto como:
<UpdateUserDetails> {inputs.map((input) => ( <FormInput key={input.id}> <UserInput type={input.type} placeholder={input.placeholder}> </UserInput> </FormInput> ))} </UpdateUserDetails>Recibo el siguiente error × TypeError: No se pueden leer las propiedades de undefined (leyendo 'mapa')
¿Qué me estoy perdiendo?
Principalmente uso React native (Expo: https://docs.expo.dev/ ) ahora, por lo que mi código se ve un poco diferente, pero parece que solo te faltaba el índice. Siéntete libre de jugar con lo siguiente
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native' export const inputs = [ { id: 1, label: 'First Name', type: 'text', placeholder: 'Remy', }, { id: 2, label: 'Surname', type: 'text', placeholder: 'Sharp', }, { id: 3, label: 'Email', type: 'email', placeholder: 'remysharp@gmail.com', }, ] export default function App() { return ( <View> {inputs.map((input, index) => ( <TouchableOpacity key={input.id}> <Text>{inputs[index]?.label}</Text> </TouchableOpacity> ))} </View> ) } Acabo de colocar entradas de userInputs como inputs en el mismo archivo por motivos de simplicidad.
Espero que esto ayude. ¡Que tengas un gran resto de tu noche!