React:チェックボックスリストを作りたい

はじめまして。今、Reactを用いて社内用Webアプリ制作をしています。
今困っていることは以下になります。

◆したいこと
checkboxのリストをJsonファイル(Jsonファイルでなくとも別ファイルから)から読み込んだもので作成したい。
◆困っていること
checkbox.jsをチェックボックスリストのコンポーネントとしたとき、checkbox.jsの中にチェックボックスのvalueや<span>タグに設定するような値を直接記載したくありません。Jsonファイルをimportし、それをもとにループを回して実現したいのですが、

JsonはKeyを一意に設定するため、配列として参照できないため呼び方がわからない。

ため、どうしたらよいかわからなくなってしまいました。
調べても直接配列やデータをコンポーネント内に羅列したものばかりで求めている情報が手に入りません。
有識者の方、解決方法や提案等ありましたら、どうかお願いいたします。

参考程度にcheckbox.jsのソースを以下に記載します。

// render内だけ抜粋
  render() {
    var list = [];
    for(let i in ProjectList){
      list.push(
      <li>
        <input type="checkbox" value={ProjectList[i].name}/>
        <span>{ProjectList[i].name}</span>
      </li>
      )
    }
    //イベントをメソッドにバインド
    return (
      <ul>
        {list}
      </ul>
    )
  }
}

hoshi-takanori

2022/02/27 10:32

具体的にどのような json ファイルから、どんなチェックボックスを生成したいのでしょうか？

chelly5

2022/02/27 11:18 編集

回答ありがとうございます。申し訳ございません。かなり説明不備でした。 jsonファイルは, ``` { key1:data1, key2:data2,・・・ } ``` といったようにdataという名称をまとめておきたいだけです。 (したいことには、keyは不要ですがjsonファイルには必要) そのjsonファイルを用いて、 □data1 □data2 というようなチェックボックスリストを作りたいと考えています。今のところ、名称があれば十分(プロパティ1つで十分)ですので、 jsonを使用しない方法等も考えておりますが、Reactは初学者のため、考えがほかに至っておりません。。。

chelly5

2022/02/27 11:21

まとめます。したいことは - チェックボックスリストの名称をほかのファイルで管理したい - importしたデータからループを用いて、チェックボックスリストを生成したいです。

hoshi-takanori

2022/02/27 11:37

いまいち何がしたいかよく分かりません。・JSON オブジェクトのキーは順不同なので、例えば data2, data1 という順番になる可能性もありますが大丈夫でしょうか？・チェックボックスを押した結果はどうやって使いたいのでしょうか？また、data1 や data2 が表示用の名称なら、データとして使う値もあった方がいいかも…。・その JSON ファイルはビルド時に確定するのでしょうか？それとも、実行時に動的に取ってくるのでしょうか？

chelly5

2022/02/27 12:04

おっしゃる通りですね。。。順不同にはしたくないので、少し考え事態を改めたいと思います。有益な意見と回答を下さりありがとうございます！解決したわけではありませんが、いったんこちらクローズでお願いします。頑張ります！