React JS returning as HTML - reactjs

Question

I know that I am horrible at React JS but I couldn't find anything specific for this one
I want to return this function into my tsx file and write it on screen but it should be in a component
function getUsers() {
const Users = ({ users } : { users:any }) => {
return (
<div>
{users.map((user : any, i : any) => (
<div className="card">
<img className="card-img-top" src={userPic} alt="Card image cap" />
<div className="card-body">
<h5 className="card-title">{user.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">{user.email}</h6>
</div>
</div>
))}
</div>
)
};
return Users;
}```

Answer 1

ReactDOMServer has a function called renderToStaticMarkup that can take some JSX and return the static HTML as a string.
The issue you'll likely have is it isn't formatted with indentation etc.
Your function will probably look something like this:
const generateHtml = (users: any[]) => {
const html = (
<div>
{users.map((user: any, i: any) => (
<div className="card" key={i.toString()}>
<img className="card-img-top" src={user.userPic} alt="Card image cap" />
<div className="card-body">
<h5 className="card-title">{user.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">{user.email}</h6>
</div>
</div>
))}
</div>
);
return ReactDOMServer.renderToStaticMarkup(html);
};
The resulting HTML is:
<div><div class="card"><img class="card-img-top" src="1.png" alt="Card image cap"/><div class="card-body"><h5 class="card-title"></h5><h6 class="card-subtitle mb-2 text-muted"></h6></div></div></div>