Render the same component twice on onClick in react

I am writing an electron application where I am using react for the UI. I am trying to add shapes(rectangle,square…), so I have created components for each of the shapes. And I have a list of shapes, when I click on the list the corresponding shapes are added. But I want to add the same shape twice which I am not able to do. Can someone help me here? Below is my code.

List.js

import React from 'react';

class List extends React.Component{

        

    render(){
        return (
            <div>
                <li onClick={this.props.drawSquare}>Square</li>
                <li onClick={this.props.drawRectangle}>Rectangle</li>
                <li onClick={this.props.drawCircle}>Circle</li>
            </div>
    );
    }
}

export default List

AppContainer.js

import React from 'react'
import List from '../components/List'
import Square from '../components/Square'
import Rect from '../components/Rect'
import Cir from '../components/Cir'
import But from '../components/basic/button'

const style={
    position: 'fixed',
    width: '800',
    height: '800'
};

const butStyle={
    position: 'relative',
    top: '500px'
}
const style1={
    borderStyle: 'groove',
    position: 'fixed',
    width: '500',
    height: '500'
};
class AppContainer extends React.Component{
    

    constructor(props) {
        super(props);
        this.state={squareclicked:0,
        rectClicked:0,
        circleClicked:0,};
    }
    
    drawSquare(){
        console.log("inside square function");
        this.setState({squareclicked:this.state.squareclicked+1})
        console.log(this.state.squareclicked);
    }

    drawRectangle(){
        console.log("inside rect function");
        this.setState({rectClicked:this.state.rectClicked+1})
    }

    drawCircle(){
        console.log("inside circle function");
        this.setState({circleClicked:this.state.circleClicked+1})
    }
    

    render(){
        console.log('render called');
        return (
            <div style={style}>
            <div id="mainAppDiv" >
            
            <List drawSquare={this.drawSquare.bind(this)}
            drawRectangle={this.drawRectangle.bind(this)}
            drawCircle={this.drawCircle.bind(this)}/>
            
            <div id="shapeConatinerDiv" style={style1}>
            {this.state.squareclicked}
            {this.state.squareclicked > 0 && (<Square/>)}
            {this.state.circleClicked > 0 && (<Cir/>)}
            {this.state.rectClicked > 0 && (<Rect/>)}
            </div>
            </div>
            <div style={butStyle}>
                <But/>
            </div>
            </div>
            
        ); 
        
    }
}

export default AppContainer

Square.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Rectangle} from 'react-shapes';
import Rnd from 'react-rnd'
import Modal from 'react-bootstrap/lib/Modal'
import ColorPallete from './Badging/ColorPalette'
import Button from 'react-bootstrap/lib/Button'

const style = {
  border: 'solid 1px',
  
};

const style1={
    position: 'fixed',
    width: '500',
    height: '500'
};

class Square extends React.Component{



    constructor(props) {
      super(props);
      this.state={w:100,
          h:100,
        col:{color:'#ff0000'},
        zIndex: 99,
        modalShow: false,
    };
      
    }

    close(){
        this.setState({modalShow: false});
    }

    onDrag(){
        console.log('hi');
    }

    onResi(dir, styleSize, clientSize, delta){
        this.setState({w:clientSize.width});
        this.setState({h:clientSize.height});
    }

    editSquare(){
        this.setState({ modalShow: true }); 
    }

      render(props) {
        return (
       
        <Rnd ref={c => { this.rnd = c; }}
            initial={{
                x: parent.innerWidth / 2 - 700,
                y: parent.innerHeight / 2 - 80,
                width: this.state.w,
                height: this.state.h,
            }}
            style={style}
            minWidth={this.state.w}
            minHeight={this.state.h}
            maxWidth={500}
            maxHeight={500}
            bounds={'parent'}
            lockAspectRatio={true}
            onResize={this.onResi.bind(this)}
            onDrag={this.onDrag.bind(this)}
      >
     <Rectangle width={this.state.w} height={this.state.h} fill={this.state.col} stroke={{color:'#E65243'}} strokeWidth={1} onClick={this.editSquare.bind(this)}/>
      </Rnd >
     
            
        );
        
    }

}

export default Square

And the other shapes have the same kind of code.

Right now I am able to add only one square and when I click again nothing happens. But I am able to add other shapes which is once.

Answer

You’ll want to add elements to an array and render the array of elements. Here’s some rough code that might help:

Component {
    constructor() {
        super(props)
        this.state = { elements: [] }
    }
    render() {
        return (<div>
            <div onClick={()=>this.add()}>Add</div>
            <div>{this.state.elements}</div>
        </div>)
    }
    add() {
        this.setState({
            elements: this.state.elements.push(<div id={elements.length}>Element</div>)
        })
    }
}