propsで他オブジェクトを指定する方法

Question

前提

親コンポーネントから渡されたPropsをerrorメッセージのオブジェクトに渡したいと考えています。

初歩的な質問で恐縮です。ご教授頂けますと幸いです。

該当のソースコード

const ItemList: FC = () => {
  return (
    <ChildComponent registerName='mainImage'>
    <ChildComponent registerName='subImage'>
  );
};

const ChildComponent: FC = (props) => {
  const errors = {
    mainImage: 'test',
    subImage: 'test2',
  }

  return (
      {errors.mainImage ? true : false} // これを
      {errors.props.registerName ? true : false} // のように指定したい
  );
};

Comments

[ka2obushi]

- errorsはどこで定義されていてどんなオブジェクトか
- ReactHookFormとあるがどこで使っているのか
- ChildComponentが要素を返していないが指定というのは何を指定しているのか
- その指定の仕方を変えてどうしたいのか
情報が足りません。追記をお願いします。

Answer 1

? true : falseの部分で何がしたいのかがわからないのですが、errorsのキーをpropsで指定して取得したいということであればerrors[props.registerName]で取得できます。
これであってますか？？？

const ChildComponent: FC = (props) => {
  const errors = {
    mainImage: 'test',
    subImage: 'test2',
  }

  return (
    <GrandChildComponent
      prop={errors[props.registerName] ? true : false}
    />
  );
};

Comments

[Junk]

まさにご教授頂いた内容が知りたかったことになります。

適切なキーワードがわからず、検索に難儀していたので非常に助かりました。

ご回答に心より感謝します。