Reactで複数のinput(入力フィールドがある)をmapしたときにはまったこと

冒頭　inputって一個だけやないんやで！！

はい、いきなりですみません。
私はReactをかじり出して１年ぐらいのペーペーで、某会社に所属しながらそこのプロジェクトでは一向にReactを触る機会がないので、自分で仕事をとってReactを勉強しています。

さて本題です、

Reactでinputって一つだけだとonChangeできるけど、

mapを使って複数のコンポーネントに紐づくinputの一つ一つにonChange設定するときどうするの?

っていうのが今回のはまった箇所です。

解決策　※ハッカーズバーで助言をいただきなんとかたどり着きました

//親
import React, { Component } from "react";
import Items from "./Items";
class Form extends Component {
  state = {
    members: [
      {
        id: 1,
        name: "1111",
        description: "ああああ",
        value: "テキスト1"
      },
      {
        id: 2,
        name: "いいいい",
        description: "2222",
        value: "テキスト2"
      },
      {
        id: 3,
        name: "うううう",
        description: "3333",
        value: "テキスト3"
      }
    ]
  };

　//handleChangeイベントを発火させて引数を受け取る
  handleChange = member => {
    this.setState({
      members: this.state.members.map(e => (e.id === member.id ? member : e))
    });
    console.log(this.state.members);
  };

  render() {
    const { members } = this.state;
    return (
      <div>
        {members.map(member => {
          return (
           //ItemsコンポーネントにonChangeのhandleChangeを渡す
            <Items 
              key={member.id}
              member={member}
              onChange={this.handleChange}
            />
          );
        })}
      </div>
    );
  }
}

export default Form;

import React, { Component } from "react";

class Items extends Component {

  //handleChangeをここで呼び出す
  handleChange = event => {
    const { member, onChange } = this.props;
    onChange({
      ...member,
      value: event.target.value
    });
  };

  render() {
    const { member } = this.props;
    return (
      <div>
        {member.id}
        //このクラスで定義しているhandleChangeを実行する
        <input value={member.value} onChange={this.handleChange} />
      </div>
    );
  }
}

export default Items;

これで結果的にinputの一つ一つにチェンジイベントが使えるようになった。

サンプル

まとめ

まだまだ勉強不足と共に「配列」を操作することが難しいと感じている
Reactをやると色々と勉強になると同時に学習せねばーーという気持ちになるので、がんばります。

もっといけてる書き方があればぜひ教えてください。