How to bind array or array of objects to dropdown in React?

Question

How to bind array or array of objects to dropdown in React?

Answer

React makes this super simple with map().

For an array of strings:

function CountryDropdown() {
  const countries = ['India', 'USA', 'Germany'];
  return (
    <select>
      {countries.map((country, index) => (
        <option key={index}>{country}</option>
      ))}
    </select>
  );
}

For an array of objects:

const countries = [
  { id: 1, name: 'India' },
  { id: 2, name: 'USA' },
  { id: 3, name: 'Germany' },
];

function Dropdown() {
  return (
    <select>
      {countries.map((c) => (
        <option key={c.id} value={c.id}>
          {c.name}
        </option>
      ))}
    </select>
  );
}

Real-World Example

Populating country/state dropdowns from an API or database.

Quick Practice

Create a RoleSelect dropdown that lists user roles (Admin, Editor, Viewer) dynamically.

Summary

Use map() to loop through arrays or objects and render options dynamically.