Mi aplicación web abrirá una matriz de JSON con función de mapa, necesito cuando reaccione un "" la imagen se escribe en la tabla y el enlace en la imagen sigue activo, mi función es:
<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>esta es mi base de datos sql
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');Idealmente, desearía almacenar nombres y URL de imágenes en diferentes columnas en una base de datos y trabajar de manera que, si existe el nombre, muestre el nombre, de lo contrario, muestre la imagen. Suponiendo que es algo que no se puede cambiar, simplemente puede usar la propiedad dangerouslySetInnerHTML SetInnerHTML de reaccionar para establecer el nombre. Por lo tanto, no importaría si se trata de un nombre o una imagen, ya que el código funcionaría para ambos escenarios.
entonces reemplazarías
<td>{contato.nome}</td>con -
<td dangerouslySetInnerHTML={{ __html: contato.nome }} />Además, siempre que esté utilizando peligrosamente SetInnerHTML, asegúrese de que los datos que provienen de la base de datos estén seguros. De lo contrario, su sitio web puede ser propenso a ataques XSS.