Create Div using button React

Question

I'm new in React App, i just want to create DIVs after each clicking the button, please help.

import logo from './logo.svg';
import './App.css';


function App() {
  function handleSubmit() {
    let div = document.createElement('div');
    div.innerText = document.getElementById('getText').innerText;
    document.body.appendChild(div);
    }
  return (
    <div className="App">
      <header className="App-header">
      <form onSubmit={handleSubmit}>
       <button>Click me!</button>
       <div id="getText"> INNER TEXT</div>
       </form>
      </header>
    </div>
  )}


export default App;

Kavindu Vindika · Accepted Answer · 2021-09-05 17:52:32Z

1

Keep a state on the number of times you click the button (count). Then you can use a for loop to create how many number of div you need to add.

import { useState } from "react";

const divCreator = (total) => {
  const divArray = [];
  for (var i = 0; i < total; i++) {
    divArray.push(
      <div id="getText" key={i}>
        INNER TEXT
      </div>
    );
  }
  return divArray;
};

function App() {
  const [count, setCount] = useState(0);

  function handleSubmit() {
    setCount((state) => state + 1);
  }
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={handleSubmit}>Click me!</button>
        {divCreator(count)}
      </header>
    </div>
  );
}

export default App;

Application View

answered Sep 5, 2021 at 17:52

Kavindu Vindika

2,7972 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nadim Seif Over a year ago

Thank you mate ! does it work that each div will have different color ?

Kavindu Vindika Over a year ago

It's also possible to set different font colour to div content. So you have to manage that inside the loop. You can manage it similar to the way I'm setting key prop inside the div, if you want to set a different colour to each div.

Nadim Seif Over a year ago

yess it worked. I used random rgb inside the function divCreator. But can you help me on something. I am trying to delete any of the div by clicking on it. Can you help me with it ?

Collectives™ on Stack Overflow

Create Div using button React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related