Unable To Map Over Dummy Data

user_16298490 0
Viewed 22

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?

reactjs json javascript
1 Answers

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!

user_130540420
Related