Cannot convert undefined or null to object in React JS

Question

I have a problem about implementing conditional rending in return part of functional component.

I got this kind of error shown below.

Cannot convert undefined or null to object

While some links have more than one link, others have only one link.

How can I fix my issue?

Here is my code shown below.

{Object.keys(projectDialog?.links).length > 1 ? (

                projectDialog?.links 
                  .map((link, index) => (
                      <a href={link.link} target="_blank" key={index} className="projectDialog_icons">{link.icon}</a>
                ))
              ) : (
                <a href={projectDialog?.links.link} target="_blank" className="projectDialog_icons">{projectDialog?.links.icon}</a>
              )
            }

The error you are getting is from this part of the code Object.keys(projectDialog?.links). projectDialog or projectDialog?.links is undefined or null. — Konrad
– Konrad, Commented Jul 18, 2022 at 20:13
probably on initial render you pass projectDialog which is null at that time - just add another conditional rendering over current render: projectDialog ? <render links> : <render placeholder> — DINK74
– DINK74, Commented Jul 18, 2022 at 20:47

Pavlo Demydiuk · Accepted Answer · 2022-07-18 22:28:13Z

1

You need additional check for cases if projectDialog or projectDialog?.links are null or undefined, for better readability and prevent from nested ternary conditional rendering I would write in such way:

...
if (!projectDialog || !projectDialog?.links) return null;
//after above check you can be sure that below return will be with defined values
return (
 {Object.keys(projectDialog?.links).length > 1 ? (
    projectDialog?.links.map((link, index) => (
       <a href={link.link} target="_blank" key={index} className="projectDialog_icons">{link.icon}</a>
                ))
              ) : (
                <a href={projectDialog?.links.link} target="_blank" className="projectDialog_icons">{projectDialog?.links.icon}</a>
              )
            }
)

answered Jul 18, 2022 at 22:28

Pavlo Demydiuk

1321 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Cannot convert undefined or null to object in React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related