[React]クリックイベントでのeventの扱いがわからない。

Question

前提・実現したいこと

React.jsのクリックイベントにおいて、クリックしたchipのラベルの名前をstateで管理したいのですが、どのように記述すればいいのかわかりません。
chipはmaterial-uiで提供されているコンポーネントの一つです。以下参照。
https://material-ui.com/components/chips/
ちなみにevent.target.labelとした場合ではnot definedとなりました。
わかる方がいましたら、コメントお願いします。

該当のソースコード

export default function Sample() {
 
  const handleClick = (event) => {
    console.info('You clicked the Chip.');
    console.log(event)//該当箇所
    //setPerson(event.target.label)
  };

  const [person, setPerson] = useState("山田花子");

  return (
    <div>
      <div className={classes.card}>
        <Card className={classes.root}>
          <CardActions>
            <FormDialog />
          </CardActions>
          <CardContent className={classes.cardContent}>
            <Chip
              icon={<PersonIcon />}
              label="山田花子"
              onClick={handleClick('山田花子')}
              onDelete={handleDelete}
              className={classes.chip}
            />
・・・

Comments

[hoshi-takanori]

Chipというコンポーネントの実装次第なので、ご自分で作ったならそのソースを、ライブラリを利用してるならその情報を教えてください。また、「event.target.labelとした場合ではnot defined」とのことですが、event.target が not defined ですか？ それとも event.target.label でしょうか？

[hoshi-takanori]

Chip に渡す label を Sample 側で指定したものから変更されないのであれば、handleClick にも Sample 側であらかじめ渡しておくことにして、
const handleClick = (label) => () => { /* event.target.label ではなく label を使う */ };
<Chip ... onClick={handleClick('山田花子')} ... />
とする方法もありますね。

[aiai8976]

追加しましたので確認お願いします。
chipは複数個あって名前を一々渡すのが面倒なのでそれを識別できるlabel的な変数を渡したいのですが、それはできないのでしょうか。

[aiai8976]

渡すというよりはeventオブジェクトでどのchipをクリックしたか認識するという意味です。

[hoshi-takanori]

単に Chip が複数並んでるだけなら、名前の配列 const personNames = ['山田花子', '山田太郎', '山田次郎']; に対して、{ personNames.map(name => <Chip label={name} onClick={handleClick(name)} ... >) } とする方法もあります。

[aiai8976]

追記した様に試しに山田花子だけhandleClickに渡したろころクリックできない様になりました。

[hoshi-takanori]

上に書いたように handleClick の宣言を
const handleClick = (label) => () => {
としてください。（関数を返す関数になってます。）

[aiai8976]

いけました！ありがとうございます。
const handleClick = (label) => {　と　const handleClick = (label) => () => {　の違いが勉強不足でイマイチわかっていませんでした。どの様に調べれば解説がヒットするでしょうか。

[hoshi-takanori]

記号の検索は難しいですよね。とりあえずキーワードとしては「関数を返す関数」「高階関数」「カリー化」あたりでしょうか。

[aiai8976]

了解しました。ありがとうございます。