ReactJs: How to add/append a component on click of button

Question

Say <componentX \> when onClick of "create box" button, the componentX should append inside of box-container. If i click create box 3 times, then three componentX should append inside box-container (It's not that simply keeping the component then hide and show when click of create box). What are all the ways to achieve this in ReactJS.

import ComponentX from './ComponentX.jsx';

class App extends React.Component{
	constructor(){
		super();
		
		this.state = {

		}
	}

	render(){
		let board = Box;

		return(
			<div>  	
				<a onClick={}>Create Box</a>
				<div className="box-container"></div>
			</div>
		);
	}
}

export default App;

Philip Pavo · Accepted Answer · 2018-09-08 17:14:14Z

8

Try something like this:

import ComponentX from './ComponentX.jsx';

class App extends React.Component{
    constructor(){
        super();

        this.state = {
            children: [];
        }
    }

    appendChild(){
        this.setState({
            children: [
                ...children,
                <componentX \>
            ]
        });
    }

    render(){
        let board = Box;

        return(
            <div>   
                <a onClick={() => this.appendChild()}>Create Box</a>
                <div className="box-container">
                    {this.state.children.map(child => child)}
                </div>
            </div>
        );
    }
}

export default App;

answered Sep 8, 2018 at 17:14

Philip Pavo

1592 bronze badges

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

Comments

Sakhi Mansoor · Accepted Answer · 2018-09-08 17:13:33Z

0

You can conditionally render by using component state like this:

import ComponentX from './ComponentX.jsx';

class App extends React.Component{
    constructor(){
        super();

        this.state = {
          showComp = false;
        }
    }

    handleClick = () => {
        this.setState({
           showComp: true,
       })
    }

    render(){
        let board = Box;
        const { showComp } = this.state;

        return(
            <div>   
                <a onClick={this.handleClick}>Create Box</a>
                <div className="box-container">
                  {showComp && <ComponentX />
                </div>
            </div>
        );
    }
}

export default App;

answered Sep 8, 2018 at 17:13

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

Collectives™ on Stack Overflow

ReactJs: How to add/append a component on click of button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related