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.
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>