How to append div to the body on a button click? - reactjs

Question

How to append div to the body on a button click?
const MyEl = () => {
return (
<>
<div>Hello</div>
</>
);
};
const AppendHtml = () => {
return (
ReactDOM.createPortal(
<MyEl />,
document.body
)
);
};
I want to append MyEl component every time a button is clicked. If a button is clicked 10 times, <div>Hello</div> should be apended to the body.
I've tried below code but it is not working.
export const MyComponent = () => {
const buttonClick = () => {
AppendHtml();
};
return (
<>
<Button onClick={buttonClick}>Click Me!</Button>
</>
);
};
Although if i use AppendHtml component inside jsx it will appear in body but that's not what i want.
I don't want to put it in jsx, I want to append MyEl component directly from code without using that return statement.

Answer 1

You don't need to use ReactDOM.createPortal in this situation. As React Documention says:
Portals provide a first-class way to render children into a DOM node
that exists outside the DOM hierarchy of the parent component.
The Portal's most common use cases are when the child components need to visually break out of the parent container as shown below:
Modal dialog boxes
Tooltips
Hovercards
Loaders
So, It's better to use React.createElement. You can do something like this:
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
const AppendHtml = (count) => {
const elementArr = [];
for (let index = 0; index < count; index++) {
let div = React.createElement("div", "", "Hello");
elementArr.push(div);
}
ReactDOM.render(elementArr, document.getElementById("myDiv"));
};
export default function App() {
const [count, setCounter] = useState(0);
useEffect(() => {
AppendHtml(count);
}, [count]);
const buttonClick = () => {
setCounter(count + 1);
};
return (
<>
<button onClick={buttonClick}>Click Me!</button>
<div id="myDiv"></div>
</>
);
}