0

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 antemanointroducir la descripción de la imagen aquí

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;

3
  • Falta mucho código para explicar exactamente como hacerlo, pero imaginando como tendrías el resto del codigo. sería que el elemento que engloba a las 2 tablas tenga una variable de estado, la cual pasas a la primera tabla la función que setea el valor para añadirla al evento onclick del elemento td de cada código, a la segunda tabla le pasas el valor de la variable para que dependiendo de dicho valor, recupere de una lista los datos que necesites en función de ese código. Ya digo que es todo muy teórico ya que faltaría el código de esos componentes.
    – Suso
    el 27 ene. a las 7:48
  • Si, esa es mi idea, de hecho ya tengo la forma de recuperar el valor con un evento onClick, ahora estoy tratando de enviar ese valor a otro componente donde esta la tabla que quiero llenar. Básicamente recupero el valor con un useState, pero no consigo exportar esa información a otro componente
    – Swankier
    el 30 ene. a las 19:18
  • Puedes probar a crear la variable de estado en el componente padre de este que muestras, y también una función que lo modifica. Así le pasas la función y el valor por props a este componente y al otro que necesitas
    – Suso
    el 30 ene. a las 19:30

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.