[React]propsを二つ扱う書き方がわからない

Question

前提・実現したいこと

下のソースコードのようにpropsを使っていますが、personNamesともう一つid(定数)を渡したいと思っています。
しかし、調べてみても書き方が全然載っていません。
誰かわかる方がいましたらコメントお願いします。

該当のソースコード

<FormDialog props={personNames} onSubmit={setPersonNames} />

export default function FormDialog({ props, onSubmit }) {

Comments

[hoshi-takanori]

そこに props という引数名を使うのは非常に紛らわしいですね。同じような質問を何度も繰り返してらっしゃるし、JavaScript や React.js に関する基本的な理解が足りてないのでは？

Answer 1

まず props={personNames} ではなく personNames={personNames} にすべきだと思います。

props という名前が良くない理由ですが、props という名前は FormDialog の引数を FormDialog(props) という形でまとめて受け取る場合（この場合、props の値は { props: personNames, onSubmit: setPersonNames } というオブジェクトになります）に使われるものだからで、これを FormDialog({ props, onSubmit }) という分割代入の形で受け取る時（この場合、props には personNames、onSubmit には setPersonNames がそれぞれ入ります）に props という引数名があると非常に紛らわしくなります。

Answer 2

調べてみても書き方が全然載っていません。

えっと、すでにprops={personNames} onSubmit={setPersonNames}とpropsを2つ渡していますよね？同じように増やして3つにすればいいだけです。