JIYIK CN >

Generate option tags for select from array in React:

1. Use map()the method to iterate over an array.
2. On each iteration, one option element is returned.
3. Pass a unique key attribute to each option element.

const App = () => {
  const arr = [
    {value: '', text: '--Choose an option--'},
    {value: 'apple', text: 'Apple 🍏'},
    {value: 'banana', text: 'Banana 🍌'},
    {value: 'kiwi', text: 'Kiwi 🥝'},
  ];

  const handleChange = event => {
    console.log(event.target.value);
  };

  return (
    <div>
      <select onChange={handleChange} name="fruits" id="fruit-select">
        {arr.map((option, index) => (
          <option key={index} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

We use Array.mapthe method to iterate over the array and render an option tag for each array element.

The key attribute we pass to each option element is used internally by React. It keeps track of which elements in the array have changed, so React can re-render only the array elements that have changed.

We used map()the index in the method, but it would be better to use a stable value if available.

valueThe attribute is guaranteed to be unique across all optionelements, so we can use it for keythe attribute.

const App = () => {
  const arr = [
    {value: '', text: '--Choose an option--'},
    {value: 'apple', text: 'Apple 🍏'},
    {value: 'banana', text: 'Banana 🍌'},
    {value: 'kiwi', text: 'Kiwi 🥝'},
  ];

  const handleChange = event => {
    console.log(event.target.value);
  };

  // 👇️ using option.value for key
  return (
    <div>
      <select onChange={handleChange} name="fruits" id="fruit-select">
        {arr.map(option => (
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

Every time the selected value changes, handleChangethe function is called. We can access the value of the selected option on the event object as event.target.value.