React - lista rozwijana na podstawie tablicy

W tym artykule chcielibyśmy pokazać, jak stworzyć listę rozwijaną na podstawie tablicy w Reakcie.

Szybkie rozwiązanie:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const colors = [
    {value: 'czerwony',  text: 'Czerwony'},
    {value: 'żółty',     text: 'Żółty'},
    {value: 'niebieski', text: 'Niebieski'}
];

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>
            Wybierz swój ulubiony kolor:
            <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'>Zatwierdź</button>
      </form>
    );
};

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

Przykład wybranego komponentu niestandardowego

W poniższym przykładzie przesyłamy tablicę opcji jako właściwość. 

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// 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: 'czerwony',  text: 'Czerwony'},
    {value: 'żółty',     text: 'Żółty'},
    {value: 'niebieski', text: 'Niebieski'}
];

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>Wybierz swój ulubiony kolor:</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);