React JS returning as HTML

user_12260088 0
Viewed 56

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;
}```
typescript reactjs
1 Answers

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>
user_7957050
Related