ReactのStateを配列の要素数に応じて生成したい

Question

前提・実現したいこと

配列の中身をテーブルに出力し、それぞれの項目にStateを付けたいと考えています。
具体的には配列のインデックスに応じた数だけstateを作り、
それぞれ別の名前（状態）を付けたいです。

該当のソースコード

const items = sampleArr.map((item, index) => {
  return (
    <Table.Row key={index.toString()}>
    <Table.Cell>{index + 1}</Table.Cell>
      <Table.Cell>
        <ChildComponent index={index}/>
      </Table.Cell>
    </Table.Row>
  );
});

import TestComponent from 'TestComponent';

const TestMove = (props) => {
  const index = props.index;
  
  const [childState, setChildState] = useState(null);
    useEffect(() => {
      setChildState(document.querySelector('element' + index));
    }, []);

  return (
     <div className={'element' + index}>{index}</div>
     <TestComponent
        state={childState}
      />
  );
};

発生している問題

上記の例のコードだと1つ目の要素にしかStateをが適用されませんでした。

実現したいコードのイメージ

const [childState + index, setChildState + index] = useState(null);

上のようにState名を動的に付けていくようなイメージです。
また他にも良い方法あれば教えていただければ助かります。
よろしくお願いいたしますm(_ _)m

Answer 1

上のようにState名を動的に付けていくようなイメージです。

残念ながら、関数コンポーネントのuseStateは、制御構造に入れてはいけないという縛りがあるので、そのようなことは実現できません。

「配列をそのままstateにする」などの方法で代用してください。

Comments

[Sutasyu127]

ご助言を受けて実装したらうまくいきました。
ありがとうございましたm(_ _)m