I am relatively new to React, but familiar with JavaScript. I want to make a really simple app and in JavaScript whenever I want to append a new HTML element I do something like this: document.getElementById("root").innerHTML += "<h1>Title</h1>";. In React I want to append a new MyComponent ponent to my page whenver my button is clicked. How can I do this in a similar way to .innerHTML +=. Below is what I have so far to give an idea, but it does not work.

index.js:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js:

function my_func() {
  var prop1 = prompt("Input here ");
  var prop2 = "new_id";
  document.getElementById("app-root").innerHTML += <MyComponent p1={ prop1 } p2={ prop2 }/>;
}

function App() {
  return (
      <div id="app-root">
      <Button color="primary" onClick={ my_func }>Add</Button>{' '}
      </div>
  );
}

export default App;

I am relatively new to React, but familiar with JavaScript. I want to make a really simple app and in JavaScript whenever I want to append a new HTML element I do something like this: document.getElementById("root").innerHTML += "<h1>Title</h1>";. In React I want to append a new MyComponent ponent to my page whenver my button is clicked. How can I do this in a similar way to .innerHTML +=. Below is what I have so far to give an idea, but it does not work.

index.js:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js:

function my_func() {
  var prop1 = prompt("Input here ");
  var prop2 = "new_id";
  document.getElementById("app-root").innerHTML += <MyComponent p1={ prop1 } p2={ prop2 }/>;
}

function App() {
  return (
      <div id="app-root">
      <Button color="primary" onClick={ my_func }>Add</Button>{' '}
      </div>
  );
}

export default App;

• javascript
• html
• reactjs

Share Improve this question Follow asked Oct 24, 2020 at 3:05 barskynbarskyn 38311 gold badge44 silver badges1414 bronze badges 5

• I think you should avoid directly writing html like that in React but rather have a state variable which keeps track of whether the button is clicked or not and then display your html using that state variable. – Harsha Limaye Commented Oct 24, 2020 at 3:10
• Okay, how would I do that in React? – barskyn Commented Oct 24, 2020 at 3:11
• pseudocode would be something like: const [clicked, setClicked] = useState(false); // Tracks whether clicked or not. RENDER: ... ... button OnClick = setClicked(!clicked); .... ... {clicked && YOUR HTML(JSX) } – Harsha Limaye Commented Oct 24, 2020 at 3:14
• Okay, but how would I then add the new ponent if it is clicked? – barskyn Commented Oct 24, 2020 at 3:15
• let me format it properly give me a sec – Harsha Limaye Commented Oct 24, 2020 at 3:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You should implement React State here. List of ponents that you will add is saved to this.state. Here is my suggestion.

This is App.js

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false,
      myponentlist:[]
    };
    this.my_func = this.my_func.bind(this);
  }
  my_func(){
     let {myponentlist} = this.state;
     var prop1 = prompt("Input here ");
     var prop2 = "new_id";
     myponentlist.push({prop1,prop2});
     this.setState({myponentlist,clicked:true});
  } 
  render() {
    const {clicked,myponentlist} = this.state;
    return (
      <div id="app-root">
         <button  onClick={this.my_func }>Add</button>
         {clicked&& myponentlist.map(myponent=> <MyComponent p1={ myponent.prop1 } p2={ myponent.prop2 }/>)}       
      </div>
    );
  }
}

export default App;

This is MyComponent.js

import React, { Component } from 'react';
class MyComponent extends Component {
    render() {
        const { p1,p2} = this.props;
        return (
            <div >
                //you can use p1,p2 here...
                <p>{p1}</p>
                <p>{p2}</p>
            </div>
        )
    }
}
export default MyComponent;

I am sure this will work. When button first clicked then clicked status bees true so array of ponents are shown every render.

Try something like this, might have to modify it a little bit according to your specific requirements.

import React,{useState} from 'react';
const App = ()=> {
    const [items, setItems] = useState([]);
    return(
      Your JSX
      {items.map((item)=> {
         return(
          <li>item</li>
         );
      })
      <button onClick={push into items}
    );
}