TypeError: Cannot read property 'map' of undefined in React

Question

I am getting error TypeError: Cannot read property 'map' of undefined . Well, I have object of array and I am extracting object keys but when I map a function then it give me error could someone please help me how to solve my problem . I tried but I failed I need to solve this application .

Code

 const patientTabOptions = {
    titleOptions: [
      { value: "mr", label: "Mr" },
      { value: "ms", label: "Ms" },
      { value: "doctor", label: "Doctor" }
    ],
    ageGroup: [
      { value: "infant", label: "Infant" },
      { value: "child", label: "Child" },
      { value: "adult", label: "Adult" }
    ],
    GenderOptions: [
      { value: "male", label: "Male" },
      { value: "female", label: "Female" },
      { value: "others", label: "Others" }
    ],
    bloodGroup: [
      { value: "a+", label: "A+" },
      { value: "a-", label: "A-" },
      { value: "b+", label: "B+" },
      { value: "b+", label: "B+" },
      { value: "b-", label: "B-" },
      { value: "o", label: "O" },
      { value: "o-", label: "O-" },
      { value: "ab+", label: "AB+" },
      { value: "ab-", label: "AB-" }
    ],
    maritalStatus: [
      { value: "single", label: "Single" },
      { value: "married", label: "Married" },
      { value: "notDisclosed", label: "Not Disclosed" }
    ]
  };

 let patientKeys = Object.keys(patientTabOptions);

In render function when I try to map it give me error

 patientTabOptions &&
                    patientTabOptions.patientKeys.map((item) =>
                      console.log(item)
                    )

Hurobaki · Answer 1 · 2020-01-07T16:14:34.717

3

It's because the key patientKeys doesn't exist inside your patientTabOptions object.

If you want to iterate through your object's keys you have to use the variable you've created called patientKeys

patientTabOptions && patientKeys.map((item) => console.log(item))

Edit from comments :

patientTabOptions && Object.keys(patientTabOptions).map(key => patientTabOptions[key])

But if you want to get data from specific array you should access directly

const data = patientTabOptions.ageGroup

edited Jan 07 '20 at 16:14

answered Jan 07 '20 at 15:55

Hurobaki

3,728
6
24
41

If my post helped you please consider upvoting and accepting as answer, thanks ! :) – Hurobaki Jan 07 '20 at 15:57
well,it have still problem it return self keys . I want to access an array like patientTabOptions.ageGroup.map but here `ageGroup` will be achieve from `Object.keys(patientTabOptions)` – Jonas Jan 07 '20 at 16:02
could you please help me ? I want to acheive my goal – Jonas Jan 07 '20 at 16:04
You mean you want to access to your `ageGroup` array from `Object.keys(patientTabOptions).map()` ? Could you tell me data you want to extract exactly ? I can make and edit to help you – Hurobaki Jan 07 '20 at 16:05
actually, I want to extract an array data . I want to access like that `patientTabOptions.Object.keys(patientTaboptions)` – Jonas Jan 07 '20 at 16:06
I've edited my answer tell me if I misunderstood your needs – Hurobaki Jan 07 '20 at 16:14

TypeError: Cannot read property 'map' of undefined in React

1 Answers1