68581


動的に配列を作り、状況に応じてその配列の個数が変動します。  
その配列の要素から必要な要素を取り出してHTMLのでリストとして表示するにはどうしたら良いでしょう？  
書き方はTypeScriptを用いて、TSXで書いています。以下、イメージです：

[code]

    const sample (index: number) => {
      const sampleList: number[] = [];
      for (let item of data[index]) { // <- データの要素数はそのindexごとに毎回違うため、配列に入る個数も変わる。
         sampleList.push(item);
      }
    
      return (
        <div>
         ...
         <ul>
           ...ここにsampleListに入っている要素の数だけリストを作りたい。 
         </ul>
        </div>
      );
    };
    
[/code]

どなたか良い方法ご存知ないですか？


CC BY-SA 4.0
2020-07-07T09:23:17.570
68368
2020-07-14T08:31:18.777
2020-07-14T08:31:18.777
2376
35503
question
html reactjs typescript
TSXでリストを動的に作るには


nekketsuuuさんの参考リンク先にもありますが、mapを使うのが一般的です。

[code]

    const sample = () => {
      const sampleList = [0, 3, 5]
      return (
        <div>
         <ul>
           {sampleList.map(num=> <li>{num}</li>)}
         </ul>
        </div>
      );
    };
    
    ReactDOM.render(sample(), document.getElementById('root'));
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    
    <div id="root"></div>
[/code]


CC BY-SA 4.0
2020-07-14T08:26:48.307
68581
2020-07-14T08:26:48.307
2376
68368
answer