Сопоставить массив строк в состоянии для выбора в качестве реквизита?

Question

У меня есть родительский компонент с чем-то похожим на массив btnColor ниже, который установлен как состояние:

export default class Contact extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        btnColor: ['White', 'Silver', 'Grey', 'Black', 'Orange']
    }
}

У меня также есть дочерний компонент выбора, который выглядит следующим образом:

const FormSelect = ({
name,
type,
placeholder,
onChange,
className,
value,
error,
children,
label,
btnColor,
...props}) => {

return (
    <div className={className}>
        <label htmlFor={name}>{label}</label>
        <select>
            <option
                id={name}
                name={name}
                type={type}
                placeholder={placeholder}
                onChange={onChange}
                value={btnColor.map(btnColor)}
            />
        </select>

    </div>
)}

То, что я хотел бы сделать, это сопоставить все элементы из массива btnColor с дочерним компонентом, а затем использовать их в качестве раскрывающихся опций в компоненте FormSelect.

В идеале ищет ответ, который не включает зацепки, так как мой проект использует состояние. - Заранее спасибо за любую помощь.

Answer 1

Вот пример того, как сделать эти элементы в массиве опциями.

class Select extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btnColor: ["White", "Silver", "Grey", "Black", "Orange"],
      submitted: false,
      colorValue: ""
    }; 
  }

  selectHandler = (event) => {
    this.setState({
      colorValue: event.target.value 
    })
  }

 render() {
   const options = this.state.btnColor.map(color => <option key={`${Math.random().toString(26).slice(2)-${color}}} value={color}>{color}</option>);

 return (
  <div>
    <label htmlFor="colorValue">Choose a color:</label>
    <select
      name="colorValue"
      value={this.state.colorValue}
      onChange={selectHandler}
    >
      <option value="">--Please choose an option--</option>
      {options}
    </select>
  </div>
    );
  }
}

Answer 2

Ну, я бы рекомендовал передать функцию модификатора состояния компоненту <select> и добавить обработчик события для onchange.

Пример

export default class Contact extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        btnColor: '[White, Silver, Grey, Black, Orange, Brown, Maroon, Green, Olive, Red, Cyan, Blue, DarkBlue, LightBlue, Purple, Yellow, Lime, Magenta]',
        submitted: false,
        selected: ''
    }

    selectHandler = (event) => {
        this.setState({submitted: true, selected: event.target.value});
    }



    function render() {
        <FormSelect onSelect={onSelect} />
    }
}

И компонент select:

const FormSelect = ({
name,
type,
placeholder,
onChange,
className,
value,
error,
children,
label,
btnColor,
onSelect,
...props}) => {

return (
    <div className={className}>
        <label htmlFor={name}>{label}</label>
        <select onchange={onSelect}>
            <option
                id={name}
                name={name}
                type={type}
                placeholder={placeholder}
                onChange={onChange}
                value={btnColor.map(btnColor)}
            />
        </select>

    </div>
)}

Обратите внимание, что в компоненте Contact я добавил новое состояние selected, в котором будет сохранено выбранное значение после запуска события onchange.