How do i append an external reactjs component onClick using hooks

Question

i'm completely new to reactjs. How do i append an external jsx with an onClick function(Just once) using react hooks?

Answer 1

You can use an array variable in your main jsx(App.js) state like shown below

    state = {
        externaljsx: []
    }

For button onClick event call function addExternal to add external JSX

    addExternal = () => {
        this.setState({
             externaljsx: [this.state.externaljsx, <NameofyourJSX />]
        })
    }

Please note should be your JSX component name.