How to append to the div in babeljs

user_13647096 0
Viewed 18

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.

babeljs reactjs javascript
1 Answers

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>

user_13770020
Related