I'm creating a mapped out component with some dummy data in the frontend. I have just some quick data i'm pulling from a js file
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",
}
]
I am then feeding this as an 'inputs' prop, as such
<UserProfile inputs={userInputs}/>
I have this passed in as a props to my component, however when I try to map out this as:
<UpdateUserDetails>
{inputs.map((input) => (
<FormInput key={input.id}>
<UserInput type={input.type} placeholder={input.placeholder}>
</UserInput>
</FormInput>
))}
</UpdateUserDetails>
I get the following error × TypeError: Cannot read properties of undefined (reading 'map')
What am I missing?
I primarily use React native (Expo: https://docs.expo.dev/) now a days so my code looks a little different, but it appears you were just missing the index. Feel free to play around with the following
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>
)
}
I just placed userInputs as inputs in the same file for simplicities sake.
I hope this helps. Have a great rest of your night!