学習反応公式文書

setStateを呼び出してstateとpropsを同時に処理する場合、setStateを関数のパラメータとします.
なぜ鍵が必要ですか?
keyはreactが変更、追加、または削除するアイテムを識別するのに役立ちます.
keyは、ユニットに安定した固有性を与えるために、アレイ内部のユニットに指定する必要があります.
インデックスをキーにするのが最後の方法です
いずれにしても、インデックスをキーとして指定しないほうがいいです.
プロジェクトの順序が変更されると、問題、パフォーマンスの低下、またはステータスに問題が発生する可能性があります.
selectタグ作成ドロップダウンリスト

class FlavorForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: 'mango'
    }
  }
  
  handleSubmit = (e) => {
    alert('Your favorite flavor is ...' + this.state.value);
    e.preventDefault();
  }
  
  handleChange = (e) => {
    this.setState({
      value: e.target.value
    })
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange} >
           <option value="grapefruit">grapefruit</option>
           <option value="lime">lime</option>
           <option value="coconut">coconut</option>
           <option value="mango">mango</option>   
           <option value="peach">peach</option>
          </select>
        </label>
      </form>
    )
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById('root')
);

複数のオプションを追加するとvalueに複数の配列を渡すことができます!
オブジェクトの開始者

const object1 = { a: 'foo', b: 42, c: {} };

console.log(object1.a);

const a = 'foo';
const b = 42;
const c = {};
const object2 = {a: a, b: b, c: c};

console.log(object2.b);

const object3 = {a,b,c};

console.log(object3.a);

ちょっと不思議
computed property name

勉強中にこれを見て何なのか分からないので後で質問!
Formik? これは何ですか.
https://formik.org/
反応庫ですか?