How to append to the div in babeljs

Question

Using this always updates the html but doesn't append to it.

function App(props) {
  return (
    <div>
      hello
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("emails-view-content"));
for (let i = 0; i < 3; i++) {
  
  root.render(<App/>);
}

I want to write hello 3 times instaed of just one.

Answer 1

App should be the component that adds the "hello" statements to the HTML.

How you do that is entirely up to you but here's a simple example. It uses a separate <Hello> component. App receives a number in its props which it uses to create an array of <Hello> components which are then rendered.

 function App({ number }) { function buildHellos(n) { return new Array(n).fill(<Hello />); } return ( <div>{buildHellos(+number)}</div> ); } function Hello() { return <p>Hello</p>; } ReactDOM.render( <App number="3" />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>