Tengo el siguiente código que utilizo para que cuando cliqueo en una table, si hay otra abierta, se cierre automaticámente:
const arr = [
{
id: "1",
title: "title 1",
content: "c1",
},
{
id: "2",
title: "title 2",
content: "c2",
}
];
const close = (id) => {
for (let i = 0; i < arr.length; i++) {
let detail = document.getElementsByTagName("details")
console.log(arr[i].id, id)
if (detail[i].open === "true") {
detail[i].open = true
} else if (detail[i].open === "false"){
detail[i].open = false
} else if (arr[i].id !== id) {
detail[i].open = false
}
}
}
return (
<ul>
{arr?.map(({id, title, content}) => (
<details key={id} onClick={() => close(id)}>
<summary>{title}</summary>
{content}
</details>
))}
</ul>
);
Mi problema es que en "content" debería ir el siguiente html
, que muestra la table. Sin embargo, no entiendo como pasar html
en un JSON, cualquier manera que intento me retorna el html
pero en formato literal, es decir en texto plano
<table class="tabla-chica mini" data-aos="fade-left">
<thead>
<tr>
<th class="text-left">Código</th>
<th class="text-left">Longitud</th>
<th class="text-left">Material</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left code">60-144</td>
<td class="text-left">24mm</td>
<td class="text-left">Titanio</td>
</tr>
<tr>
<td class="text-left code">60-145</td>
<td class="text-left">26mm</td>
<td class="text-left">Titanio</td>
</tr>
<tr>
<td class="text-left code">60-146</td>
<td class="text-left">28mm</td>
<td class="text-left">Titanio</td>
</tr>
</tbody>
</table>
¿Alguna sugerencia de cómo poder hacer esto? Intenté buscando en la web pero como dije no logré obtener éxito
{content}
como HTML y no como texto plano?