Languages
[Edit]
EN

React - how to pass array of options to select

3 points
Created by:
Dirask Community
6930

In this article we would like to show you how with defined array of options create select element in React.

Quick solution:

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const colors = [
    {value: 'red',    text: 'Red'   },
    {value: 'yellow', text: 'Yellow'},
    {value: 'blue',   text: 'Blue'  }
];

const App = () => {
    const [color, setColor] = React.useState('red');
    const handleChange = e => setColor(e.target.value);
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
          	color: color
        };
        const json = JSON.stringify(data);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Choose your favorite color:
            <select value={color} onChange={handleChange}>
              {colors.map(item => {
                return (<option key={item.value} value={item.value}>{item.text}</option>);
              })}
            </select>
          </label>
        </div>
        <button type='submit'>Submit</button>
      </form>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Custom select component example

Below example divides separated select component that let us to pass options as array in property.

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const Select = ({value, options, onChange}) => {
  	return (
      <select value={value} onChange={onChange}>
        {options.map(option => {
          return (<option key={option.value} value={option.value}>{option.text}</option>);
        })}
      </select>
    );
};

const colors = [
    {value: 'red',    text: 'Red'   },
    {value: 'yellow', text: 'Yellow'},
    {value: 'blue',   text: 'Blue'  }
];

const App = () => {
    const [color, setColor] = React.useState('red');
    const handleChange = e => setColor(e.target.value);
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
          	color: color
        };
        const json = JSON.stringify(data);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            <span>Choose your favorite color:</span>
            <Select value={color} options={colors} onChange={handleChange} />
          </label>
        </div>
        <button type='submit'>Submit</button>
      </form>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

ReactJS

React - pass array of options to select
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join