CODEWITHSUNDEEP
reactjstypescriptconditional-statementsrenderingtsx
Peter Herczku
Peter Herczku

Reputation: 33

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>

Upvotes: 0

Views: 404

Answers (3)

Satwinder Singh
Satwinder Singh

Reputation: 229

Instead of foreach can you please try map ? E.g

getProfiles().map((profile, index) => ( {profile.profileName}));

Upvotes: 0

igorves
igorves

Reputation: 591

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

Upvotes: 1

Peter Herczku
Peter Herczku

Reputation: 33

I found a solution. I used map instead of foreach and i removed curly braces and used regular ones.

<select name="profile" className="billingSelector">
   <option>Billing profile</option>
   {getProfiles().map((profile:Profile)=> (
        <option key={profile.profileName}>{profile.profileName}</option>
   ))}       
</select>

Upvotes: 1

Related Questions