map an array with index keys to return a list of items react JS

Question

I have an array here that I would like to map out and list in radio check boxes.

I currently can only get one item of the array to return by typing out for example: <IonLabel>{item[1]}</IonLabel>

How would I get all of them to list out?

'equipment' Array

{0: "Camera", 1: "Wide Angle Lens (16mm equivalent)", 2: "Tripod", 3: "Drone"}

0: "Camera"
1: "Wide Angle Lens (16mm equivalent)"
2: "Tripod"
3: "Drone"

Current Code

{equipment.map((item, i) => {
          return (
        <IonItem key={i}>
         <IonLabel>{item}</IonLabel>
         <IonRadio slot="start" value="biff"/>
        </IonItem>

          );
        })}

Smolin Pavel · Accepted Answer · 2020-01-29 15:01:00Z

2

Looks like you are using not an Array, but an Object with numbers as keys.

Try this one:

{
  Object.values(equipment).map((item, i) => (
     <IonItem key={i}>
       <IonLabel>{item}</IonLabel>
       <IonRadio slot="start" value="biff"/>
     </IonItem>
   )
  );
}

Another solution could be in rewriting your equipment to look like:

const equipment = ["Camera", "Wide Angle Lens (16mm equivalent)", "Tripod", "Drone"] In this case, you could use your previous implementation.

answered Jan 29, 2020 at 15:01

Smolin Pavel

5103 silver badges8 bronze badges

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

Comments

nystromkarlsson · Accepted Answer · 2020-01-29 15:04:09Z

0

What you have here is not an array, but an object.

You can store the data in an array like this:

['Camera', 'Wide Angle Lens (16mm equivalent)', 'Tripod', 'Drone']

Now you can iterate over it using map just like you have done in your example.

answered Jan 29, 2020 at 15:04

nystromkarlsson

11 bronze badge

Collectives™ on Stack Overflow

map an array with index keys to return a list of items react JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related