[material-ui]onChangeに引数を渡せない

Question

前提・実現したいこと

material-uiのkeyboardtimepickerを利用しているのですが、複数利用しようと思ってもonChangeのhandleDateChangeのところで引数を渡すことができません。
どのように二つのコンポーネントを区別すればいいのでしょうか。

参考
https://material-ui.com/components/pickers/

発生している問題・エラーメッセージ

二つのコンポーネントを区別する方法がわからない

該当のソースコード

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(new Date('2014-08-18T21:11:54'));

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardTimePicker
          margin="normal"
          id="time-picker"
          label="Time picker"
          value={selectedDate}
          onChange={handleDateChange} //対象箇所
          KeyboardButtonProps={{
            'aria-label': 'change time',
          }}
        />
<KeyboardTimePicker
          margin="normal"
          id="time-picker"
          label="Time picker"
          value={selectedDate}
          onChange={handleDateChange} //対象箇所
          KeyboardButtonProps={{
            'aria-label': 'change time',
          }}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

Comments

[m.ts10806]

React.js のタグはあった方が良いと思います

[aiai8976]

追加しました！

Answer 1

二つのコンポーネントを区別する方法がわからない

それぞれのKeyboardTimePickerで別々のDateを扱いたいのでしょうか？

KeyboardTimePickerごとのに別々のStateを用意する必要があるのではないかと思いました。

Comments

[aiai8976]

2ち程度ならそうするのですが、さらにそれ以上使うときにもそのやり方しかないのでしょうか。

[kmtr]

前提としてKeyboardTimePickerのvalueに対して、別々の値をそれぞれもたせたい場合はそれを格納するstateもそれぞれ必要だと思います。

> さらにそれ以上使うときにもそのやり方しかないのでしょうか。

例えばKeyboardTimePickerで使用するuseStateの定義を1回で済ませたいという意味であれば、配列やオブジェクトでstateを定義する方法はどうでしょうか？