Как изменить цвет текста при выборе option?

Question

[Dmitriy]

Есть селект со списком CSS цветов. Есть абзац. Надо сделать так, чтобы при смене цвета абзац красился в выбранный цвет.

Мое недоработанное решение:

import React from 'react'

class Practice6 extends React.Component {
    constructor() {
        super()
        this.state = {
            options: ['yellow', 'black', 'blue', 'red'],
            option: 1,
        }
    }


    onChange(e) {
        this.setState({ option: e.target.value })
    }
    setColor(color) {
        return(
            <b style={{color: color}}>{this.state.options[this.state.option]}</b>
        )
    }


    render() {
        const s = this.state
        const options = s.options.map(
            (color, index) => {
                return (
                    <option value={index} onclick={this.setColor.bind(this, color)} >{color}</option>
                )
            }
        )

        return (
            <form className="form">

                <select value={s.option} onChange={this.onChange.bind(this)}>
                    {options}
                </select>

                <p>Вы выбрали {setColor()} цвет</p>

            </form>
        )
    }
}

export default Practice6

Answer 1

[0xD34F]

class App extends React.Component {
  state = {
    colors: [ 'раз цвет', 'два цвет', 'три цвет', 'ещё какой-то цвет', 'и ещё' ],
    selectedColor: '',
  }

  onChange = e => {
    this.setState({
      selectedColor: e.target.value,
    });
  }

  render() {
    const { colors, selectedColor } = this.state;

    return (
      <div>
        <select value={selectedColor} onChange={this.onChange}>
          <option disabled hidden value="">SELECT COLOR</option>
          {colors.map(n => <option>{n}</option>)}
        </select>

        {selectedColor &&
          <p style={{ color: selectedColor }}>
            {selectedColor} color selected
          </p>
        }
      </div>
    );
  }
}