My web app will open a array of JSON with map function, i need when the react the an "" the image get write on the table and the link on the image still active, my function is:
<table className="table">
<thead className=".thead-dark">
<tr>
<td>Id</td>
<td>Name</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
{this.state.contatos.map((contato, index) => (<>
<tr>
<td>{contato.id}</td>
<td>{contato.nome}</td>
<td>{contato.telefone}</td>
</tr>
</>))}
</tbody>
</table>
this is my sql db
INSERT INTO contatos(nome,telefone) VALUES ('<a><img src="example.com"</img></a>','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Carey Shers','305-565');
INSERT INTO contatos(nome,telefone) VALUES ('Bill Manys','298-2125');
INSERT INTO contatos(nome,telefone) VALUES ('john peter','465-1827');
Ideally, you'd want to store names and image urls in different columns in a db and work in a way that if name exists - show name, else, show image.
Assuming that is something that can not be changed, you can just use react's dangerouslySetInnerHTML property to set the name. So it wouldn't matter if it's a name or an image as the code would work for both the scenarios.
so you'd replace
<td>{contato.nome}</td>with -
<td dangerouslySetInnerHTML={{ __html: contato.nome }} />Also, whenever you're using dangerouslySetInnerHTML, make sure that the data that is coming from the DB is safe. Else your website can be prone to XSS attacks.