Cannot read properties of undefined (reading 'includes') in React JS

Question

These are my error coding, propApptData.doctor values are Dr X|Dr Y. I want to split the propApptData.doctor values and then put them in the resource, after that I reload the webpage and go to trigger this function, the page cannot show anything.

if (propApptData !== undefined && preDoctor !== true) {
      const doctors = propApptData.doctor.includes("|") ? propApptData.doctor.split("|"): propApptData.doctor;
      setDoctorDetailList([...doctorDetailList, { resource: doctors }]);
      setPreDoctor(true)
    }

In the other function If the value just does not include |, just 1 doctor name, the function can be work if using below coding:

propDoctorName value is Dr.X

if (propDoctorName !== undefined && preDoctor !== true) {
      setDoctorDetailList([...doctorDetailList, { resource: propDoctorName }]);
      setPreDoctor(true)
    }

The error result is shown below:

Hope someone can guide me on how to solve this problem. Thanks.

[Update - 1 ]

What I have tried just now, the doctor list cannot split into array like below picture:

if (propApptData !== undefined && preDoctor !== true) {
      const doctors = propApptData.doctor ? propApptData.doctor.split("|"): [propApptData.doctor];
      setDoctorDetailList([...doctorDetailList, { resource: doctors }]);
      setPreDoctor(true)
    }

[Updated -2]

[Updated -3]

The error is pretty self-explanatory. propApptData.doctor is null or undefined, at least for a moment... — Ergis
– Ergis, Commented May 27, 2022 at 8:13

amin keshavarzi · Accepted Answer · 2022-05-27 08:17:57Z

2

propApptData.doctor is undefined to solve it you can add ? mark like thispropApptData.doctor?.includes("|")

answered May 27, 2022 at 8:17

amin keshavarzi

1214 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Fatt Sky Over a year ago

Thanks for your answer. I have tried it, but cannot split in the doctor list. Can you help me to see? Thanks

amin keshavarzi Over a year ago

i think you have to check if propApptData.doctor is undefined or not in the if clause if (propApptData && propApptData.doctor && !preDoctor) like this. tell me if it works.

Fatt Sky Over a year ago

if (propApptData && propApptData.doctor && !preDoctor) this one can. So the next step how to split these 2 doctor name in the doctor list (I have shown in my question below)

amin keshavarzi Over a year ago

if (propApptData && propApptData.doctor  && !preDoctor) {       const doctors = propApptData.doctor.includes('|') ? propApptData.doctor.split("|"): [propApptData.doctor];       setDoctorDetailList([...doctorDetailList, { resource: doctors }]);       setPreDoctor(true)     }

does this work?

Fatt Sky Over a year ago

Yes. It is work. Just only cannot split each into doctor lists. Can you see my latest update in my question picture (Updated - 1)?

|

kwaku hubert · Accepted Answer · 2022-05-27 08:34:22Z

0

The error self-explanatory, propApptData.doctor is undefined. To void these kinds of errors in the future, you can use the optional operator or assign a default value using the nullish operator or logical OR operator.

// Optional operator
const doctors = propApptData.doctor?.includes("|") ? propApptData.doctor.split("|"): propApptData.doctor;

// Nullish Operator
const doctors = (propApptData.doctor ?? "" ).includes("|") ? propApptData.doctor?.split("|"): propApptData.doctor;

// Logical Or
const doctors = (propApptData.doctor || "" ).includes("|") ? propApptData.doctor?.split("|"): propApptData.doctor;

You can read more from here.

answered May 27, 2022 at 8:34

kwaku hubert

5113 silver badges4 bronze badges

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading 'includes') in React JS

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related