score:0

you are returning jsx from the onclick handler, what you want to do is render some jsx based on current selected item.

to do so you can save a reference to the data (not the template)

example: onclick={() => setvisibletable(id)}

then somewhere else in the template you can decide to render a table based on the id.

{tables[id] && 
  <table>
    <tr>
      <th>name</th>
      <th>description</th>
    </tr>
    {tables[id].map((s) =>{
      <tr key={s.name}>
        <td>{s.name}</td>
        <td>{s.description}</td>
      </tr>
    })}
  </table>
}

Related Query

More Query from same tag