Loop through an array in React.js

Question

Loop through an array in React.js

  let allInfo = ['John', 'Doe']; 
    allInfo.map((name) => console.log("arr", name.firstName))

The statement above creates an array. I am looking to loop through the values and insert them into a new array for display in a dropdown menu.

    const info = [
        { value: "firstName", label: "firstName" },
        { value: "first",label: "first"},
        { value: "lastName", label: "lastName" }
    ]

I aim to iterate over the values of allInfo and assign them to the values in info. Instead of hardcoding value = "firstName", I want to fetch it from the allInfo array. Could someone assist me with this task?

javascript arrays mapping

Answer 1

Answer №1

To retrieve the info array, simply map the contents of the allInfo array.

const info = allInfo.map(name => ({
    value: name.firstName,
    label: name.firstName,
}));

If you wish to include some fixed values in the info array as well, utilize the spread operator like so:

const allInfoItems = allInfo.map(name => ({
    value: name.firstName,
    label: name.firstName,
}));

const info = [
    { value: 'something', label: 'something' },
    ...allInfoItems
]

Answer 2

To retrieve the info array, simply map the contents of the allInfo array.

const info = allInfo.map(name => ({
    value: name.firstName,
    label: name.firstName,
}));

If you wish to include some fixed values in the info array as well, utilize the spread operator like so:

const allInfoItems = allInfo.map(name => ({
    value: name.firstName,
    label: name.firstName,
}));

const info = [
    { value: 'something', label: 'something' },
    ...allInfoItems
]

Loop through an array in React.js

Answer №1

Similar questions

Expression validation in AngularJS is a powerful tool for ensuring that

Showing list data from script to template in vue - A step-by-step guide

Create a 3D rendering of an .obj file using Three.js without relying on the

How can you determine if a specific variable exists within an array using an if statement?

ajax continues to repeatedly post old values

What is the best way to link my React application with my Express API?

How can one effectively overcome the constraint in HTML5 canvas that prevents altering the positions of previously sketched elements?

Implementing velocity.js for hover effects - a comprehensive guide

Is the process of converting text to PNG and then reading it as a stream all completed on the front-end?

Is this JavaScript code accurately matching the height of all three elements?

`Error encountered when attempting to convert date with Angular JS filter`

Error retrieving user by provider account ID using Google and Firebase adapter with Next Auth

What are some methods to avoid clipping absolute positioned elements while maintaining a box shadow around the parent div?

Using Vue.js as a view engine for ExpressJS

Hiding an image when pressing on a navbar icon: Tips and tricks

What method can be used to keep Chromium open while using Puppeteer?

Top method for stacking several divs in a vertical line

Which one should you begin with: AngularJS or Angular 2?

PHP split string into an array

What is the best way to apply a hover rule to a CSS class in order to change the color of a specific row when hovering in