Search code examples
reactjstypescriptconditional-statementsrenderingtsx

React+Typescript conditional rendering

I want to create an option for every single profile that I have. I checked and I do have a profile so the profiles array is not empty and profile.profilename isn't undefined. It just doesn't render.

What i see: Picture

<div className="col-4">
   <select name="profile" className="billingSelector">
         <option>Billing profile</option>
             {(getProfiles() as any).forEach((profile:Profile) => {
                  <option>{profile.profileName}</option>
              })}
   </select>
</div>
Solution

  • Use map instead of foreach.

    There is a difference. Map returns list, foreach - not.

    More info on that:

    Array.prototype.forEach() - JavaScript | MDN

    Array.prototype.map() - JavaScript | MDN