Tengo una tabla donde se lista una serie de empresas con su nemotécnico, lo que necesito es que al hacer clic en alguno de los nemotécnicos (por ejemplo SPY) la tabla que se encuentra a la derecha (que estaré dejando marcado) se cargue con valores correspondiente al nemotécnico seleccionado, que cumple la función de clave principal, de un archivo JSON Mi consulta ¿Cómo logro hacerlo? Pasar la clave principal y que se llene la tabla con los datos correspondientes. Espero haberme explicado, gracias de antemano
El código que estoy utilizando para cargar la primera tabla es el siguiente:
import Symbols from "./symbols.json";
import React, { useEffect, useState } from "react";
const DatosSymbols = () => {
const [search, setSearch] = useState("")
const searcher = (e) => {
setSearch(e.target.value)
console.log(e.target.value)
}
const results = ! search ? Symbols : Symbols.filter((dato) => dato.symbol.toLowerCase().includes(search))
return (
<div className="container-left mt-5 mb-5">
<input type="text" value={search} onChange={searcher} placeholder="Search by Nemo" className="form-control" />
<table className="table table-striped table-hover mt-4 mb-4 shadow-lg">
<thead>
<tr>
<th>Nemo</th>
<th>Nombre empresa</th>
</tr>
</thead>
<tbody>
{results.map((symbols) => (
<tr key={symbols.symbol}>
<td>{symbols.symbol}</td>
<td>{symbols.name}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default DatosSymbols;