ReactでHTML要素を動的に追加する方法

ReactでHTML要素を動的に追加

ReactでHTML要素を動的に追加するには、状態（state）とコンポーネントの再レンダリングを活用します。
以下に、ボタンをクリックするたびに新しいHTML要素を追加する簡単な例を示します。

Reactのプロジェクトで、以下のコードをApp.jsにコピーします。

import React, { useState } from 'react';
import './App.css';

function App() {
  // stateを使って要素のリストを管理
  const [elements, setElements] = useState([]);

  // 新しい要素を追加する関数
  const addElement = () => {
    setElements([...elements, Element ${elements.length + 1}]);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>動的要素の追加</h1>
        <button onClick={addElement}>要素を追加</button>
        <div>
          {elements.map((element, index) => (
            <div key={index}>{element}</div>
          ))}
        </div>
      </header>
    </div>
  );
}

export default App;

説明

1. 状態の管理

• useStateを使用して、elementsという配列の状態と、それを更新するための関数setElementsを作成しています。

2. 要素を追加する関数

• addElement関数は、現在のelements配列に新しい要素を追加し、setElementsを使って状態を更新します。

3. レンダリング

• ボタンがクリックされたときにaddElement関数が呼ばれ、新しい要素がelements配列に追加されます。
• elements配列をmap関数でループし、それぞれの要素をdivタグとして表示します。

これにより、ボタンをクリックするたびに新しいHTML要素が追加されます。