Как сделать несколько изменчивый выбор в реакции?

Question

Я не могу понять, как сделать независимыми друг от друга выборки, если я рендерил все эти выборки через карту. Как правильно реализовать, учитывая, что в будущем данные будут взяты из избыточного хранилища?

Подробный пример кода здесь

import React from "react";
import ReactDOM from "react-dom";
import Select from "@material-ui/core/Select/Select";
import InputLabel from "@material-ui/core/InputLabel/InputLabel";
import FormControl from "@material-ui/core/FormControl/FormControl";
import MenuItem from "@material-ui/core/MenuItem/MenuItem";

class App extends React.Component {
  state = {
    selectValue: "",
    selectTitle: [
      {
        title: "Title1"
      },
      {
        title: "Title2"
      }
    ]
  };
  handleChange = event => {
    console.log(event.target);
    this.setState({ [event.target.name]: event.target.value });
  };
  render() {
    const renderSelect = this.state.selectTitle.map((item, index) => 
      <FormControl key={index} style={{ width: "100%", marginTop: "27px" }}>
        <InputLabel htmlFor="age-auto-width">{item.title}</InputLabel>
        <Select
          value={this.state.selectValue}
          onChange={this.handleChange}
          inputProps={{
            name: "selectValue"
          }}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    );
    return (
      <div className="App">
        {renderSelect}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

РЕДАКТИРОВАТЬ: Пример кода с решением

Оба выбора имеют одинаковое значение, потому что у каждого элемента <Select> есть value опора, вытягивающая из того же this.state.selectValue в состоянии. Вам необходимо хранить каждое значение отдельно таким образом, чтобы оно соответствовало его названию.

Что-то вроде:

state = {
  selectValue: {
    Title1: 10,
    Title2: 30
  },
  selectTitle: [
    {
      title: "Title1"
    },
    {
      title: "Title2"
    }
  ]
};

Затем внесите изменения в компонент, чтобы исправить чтение и запись в состояние.