if else question mark in reactjs

I am having an error with if else question mark in react.

  let skillSetStr = useSkillset(userInfo.Skills);
  // In some cases the db returns the userInfo in different objects.
  // For now this fixes the problem.
  if (userInfo.Skills === undefined) {
    skillSetStr = skillStr;
  }

        {skillSetStr ?
          <div className="user-preview-info">
            <div className="grid-item">Skillsets:</div>
            <div className="grid-item user-preview-info_data">
              {userInfo.Skills ?
                <div>
                  {userInfo.Skills.map(
                    (skillName, index) => <div key={index} className="user-skill"> {skillName.skill} </div>
                  )}
                </div>
                : <div>Unspecified</div>}
            </div>
          </div> : ""}

So in if else condition it’s suppose return “Unspecified” for in but instead it’s return null.

Here is how my project look like: enter image description here

How can I fix this error?

Answer

If it is saying that the array is undefined you can check it isn’t empty before getting its length with “option chaining”.

It would look like this:

userInfo?.Skills?.length > 0 this removes the need to do two checks.