CODEWITHSUNDEEP
reactjs
codeBeginner
codeBeginner

Reputation: 29

TypeError: Cannot read property'map' of undefined, I want to implement select option using map, but there is a problem

error code :

TypeError: Cannot read property 'map' of undefined
PatientInfoModal
D:/test/pages/patient/PatientInfoModal.js:164
  161 |                </Form.Item>
  162 | 
  163 |                <Form.Item name={['patient', 'hospital']} label="Hospital" rules={[{ required: 
                                        true }]}>
> 164 |                     <Select placeholder="Select a Hospital" style={{ width:'150px' }}>
      | ^  165 |                     {testplz.map(a => <Option>{a.name}</Option>)}
  166 |                    </Select>
  167 |                </Form.Item>

mycode.js :

  const doctorplz = { doctor }
  const [ whats, whatsdata ] = useState("doctor")
  const testplz = doctorplz[whats]

  <Select placeholder="Select a Hospital" style={{ width:'150px' }}>
  {testplz.map(a => <Option>{a.name}</Option>)}
  </Select>

console.log(doctorplz) :

{doctor: Array(4)}
doctor: Array(4)
0: {d_code: 1, name: "test1", position: "RB", code_id: 1}
1: {d_code: 2, name: "test2", position: "LB", code_id: 2}
2: {d_code: 3, name: "test3", position: "ST", code_id: 2}
3: {d_code: 4, name: "test4", position: "RW", code_id: 1}
length: 4
__proto__: Array(0)
__proto__: Object

I got the error despite entering the code correctly. I don't know what the hell is wrong.

Also, the code below works fine.

mycode2.js (Code that works)

const namelist = {
    "01": [
      { d_code: '1', name: 'test1' },
      { d_code: '2', name: 'test2' },
      { d_code: '3', name: 'test3' }
    ]
  }

const [ data, setData ] = useState("01");
const Options = namelist[data];

<Select placeholder="Select a Doctor" style={{ width:'150px' }} >
{Options.map(a => <Option>{a.d_code}</Option>)}
</Select>

console.log(namelist) :

{01: Array(3)}
01: Array(3)
0: {d_code: "1", name: "test1"}
1: {d_code: "2", name: "test2"}
2: {d_code: "3", name: "test3"}
length: 3
__proto__: Array(0)
__proto__: Object

The format of the two data matches perfectly when running console.log().

But I don't know why I am getting the map error. Anything wrong with this code?

add console.log(doctor):

(4) [{…}, {…}, {…}, {…}]
0: {d_code: 1, name: "test1", position: "RB", code_id: 1}
1: {d_code: 2, name: "test2", position: "LB", code_id: 2}
2: {d_code: 3, name: "test3", position: "ST", code_id: 2}
3: {d_code: 4, name: "test4", position: "RW", code_id: 1}
length: 4
__proto__: Array(0)

Upvotes: 2

Views: 63

Answers (2)

Himanshu Tariyal
Himanshu Tariyal

Reputation: 344

I suppose you are getting the doctor field as a props. If so, there is a chance that it might be undefined. In this case, undefined.map() will give error. So you can perform a simple check and then use map function

{ testplz ? 
           testplz.map( (data, index) => <Option key={index}>{data.name}</Option>:<p>Loading...<p>}

Upvotes: 0

kiranvj
kiranvj

Reputation: 34147

testplz might be initially empty, try adding a validation

 {testplz && Array.isArray(testplz) && testplz.map(a => <Option>{a.name}</Option>)}

Upvotes: 1

Related Questions