CODEWITHSUNDEEP
javascriptreactjs
myriad99a1
myriad99a1

Reputation: 41

How to create new div after clicking a button in React,Js?

I am new to React.JS. I need to make a button that creates a div with a child element every time the button is clicked. My current code does not create a new div whenever I click the button.

Also how would I create a new div with a child div inside it in React Js?

Here is my ReactJs code:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';

 class CrudDivs extends React.Component {

    renderCrudDiv(){
      console.log('clicked')
      return (
        React.createElement(
          "div",
          {className: "crud-card"},
          "NewDiv",
        )
      )
    }

    render(){

      return (

        <div className="crud-container">
          <div className = "btnContainer" >
            <button className = "makeDivsBtn"  onClick = {this.renderCrudDiv}> 
                    Create Divs
            </button>
          </div>
        </div> // container end 
        
      )
      
    }  
}

ReactDOM.render(< CrudDivs /> , document.getElementById('root'));

Upvotes: 1

Views: 9238

Answers (4)

user16663341
user16663341

Reputation:

you need to create a new row in your database or something like that, then you have to refresh so show the datas like this:

{this.elements.map((_, index)=> <Element key={index} /> )}

Element component will be:

Class Element extends React.Component {
   render() {
     return <div> E </div>
   }
}

Upvotes: 0

Akash
Akash

Reputation: 103

Looking at the code, it looks like you are coming a jQuery background where you write procedures on how to mutate the DOM on events rather than using declarative style of React.

In simpler terms, you should maintain a state (ie. count) of how many divs to display at a given time which should then be incremented on button click.

class CrudDivs extends React.Component {
    constructor(props) {
      super(props);
      this.state = {divCount: 0};
      this.renderCrudDiv = this.renderCrudDiv.bind(this);
      this.divList = this.divList.bind(this);
    }

    renderCrudDiv(){
      this.setState({divCount: this.state.divCount + 1});
    }

    divList() {
      const rowList = [];
      for (let i = 0; i < this.state.divCount; i++) {
        rowList.push(<div className="crud-card">NewDiv</div>);
      }
      return rowList;
    }

    render(){
      return (
        <div className="crud-container">
          <div className = "btnContainer" >
            <button className = "makeDivsBtn" onClick = {this.renderCrudDiv}> 
                    Create Divs
            </button>
          </div>
          {divList()}
        </div> // container end 
      )
    }  
}

This being said, as already mentioned in comments, you should use the newer functional & hook syntax rather than this deprecated one.

Upvotes: 1

Tomasz Staszkiewicz
Tomasz Staszkiewicz

Reputation: 440

I think that the easiest way to achieve your goal is to use state, which is a mechanism that keeps some internal data for your component and causes it to rerender. Try changing your implementation to something like this:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';

 class CrudDivs extends React.Component {
    state = {
        storedElements: [] // at the beginning there are no elements
    }
    
    renderSingleDiv() { // generate single element
        return (
          React.createElement(
          "div",
          {className: "crud-card"},
          "NewDiv",
        )
      )
    }

    renderCrudDiv(){ // update state with new element
      this.setState((prev) => {
         return { 
             storesElements: [
                 ...prev.storedElements, 
                this.renderSingleDiv()
             ]
           }
      });
    }

    render(){

      return (

        <div className="crud-container">
          <div className = "btnContainer" >
            <button className = "makeDivsBtn"  onClick = {this.renderCrudDiv}> 
                    Create Divs
            </button>
          </div>
        {storedElements} // display elements
        </div> // container end 
        
      )
      
    }  
}

ReactDOM.render(< CrudDivs /> , document.getElementById('root'));

There are for sure better ways to do this, but I was trying to keep as much from your implementation as possible. :)

Upvotes: 0

Rahul
Rahul

Reputation: 5834

Considering that every time you've to add same content.

You can create a component. For example:

Class Child extends React.Component {

render() {
  return <div>Child</div>
}

}

Now in your CrudDivs simply create a state called childrens of array time.

 import React from 'react';
 import ReactDOM from 'react-dom';

 import Child from './Child';
 import './index.css';

 class CrudDivs extends React.Component {

    constructor(props) {
        super(props);

       this.childrens = [];
     }

    renderCrudDiv(){
      const temp = [...this.childrens];
      temp.push(1); // to increase counter
      this.setState({childrens:temp});
    }

    render(){

      return (

        <div className="crud-container">
          <div className = "btnContainer" >
            <button className = "makeDivsBtn"  onClick = {this.renderCrudDiv}> 
                   
            </button>

          {this.childrens.map((_, index)=> <Child key={index} /> )}
          </div>
        </div> // container end 
        
      )
      
    }  
}

ReactDOM.render(< CrudDivs /> , document.getElementById('root'));

Upvotes: 1

Related Questions