React+Typescript conditional rendering

Question

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>

as any is irrelevant, i was just trying to fix it. getProfiles() return a Profile array so i am getting all of its elements. i removed as any from the code — Peter Herczku
– Peter Herczku, Commented Apr 28, 2021 at 20:47
Is it by any chance async? What does console.log(getProfiles()) print? — tkausl
– tkausl, Commented Apr 28, 2021 at 20:48
console.log(getProfiles()) prints out the array. It has one element which is the profile that I want to show on screen. — Peter Herczku
– Peter Herczku, Commented Apr 28, 2021 at 20:51
[p] 0: p {profileName: "test profile #1", firstName: "John", lastName: "Doe", postalCode: "29223", city: "Celle", …} length: 1 __proto__: Array(0) — Peter Herczku
– Peter Herczku, Commented Apr 28, 2021 at 20:51

igorves · Accepted Answer · 2021-04-28 21:03:55Z

1

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

answered Apr 28, 2021 at 21:03

igorves

5913 silver badges11 bronze badges

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

Comments

Peter Herczku · Accepted Answer · 2021-04-28 21:01:24Z

1

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>

answered Apr 28, 2021 at 21:01

Peter Herczku

334 bronze badges

Comments

Satwinder Singh · Accepted Answer · 2021-04-28 21:05:50Z

0

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

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

answered Apr 28, 2021 at 21:05

Satwinder Singh

2292 silver badges10 bronze badges

Collectives™ on Stack Overflow

React+Typescript conditional rendering

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related