Mostrar popup con información traída de un elemento de mesa en la react. js

Question

Estoy desarrollando una aplicación en React. JS y yo tenemos que mostrar información que más detalles el elemento seleccionado de una tabla. Comparto una imagen como una explicación para que pueda entenderse o lo que necesito hacer. ¿Cómo puedo hacerlo? Entiendo que tienes que pasar variables al popup para que sean tomadas y mostradas según el elemento seleccionado.

quantumcoderd26d · Accepted Answer

Para este caso de uso, crear un estado local en el componente y actualizar los detalles sobre el clic del registro seleccionado y pasar el estado al modal.

Aquí he creado un selectedData estado para popular los registros seleccionados y actualizar este estado cuando onClick of more detailsen la mesa y también pasarlos como props al modal para que aparezca en la UI.

Código completo:-

import React, { useState } from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

const data = [
  {
    id: 1001,
    firstname: "Mark",
    lastname: "Otto",
    age: 34,
    location: "London",
    address: "10 Downing Street"
  },
  {
    id: 1002,
    firstname: "Jacob",
    lastname: "Jacob",
    age: 34,
    location: "India",
    address: "#110 broad Street"
  }
];

export default function App() {
  const [show, setShow] = useState(false);
  const [selectedData, setSelectedData] = useState({});
  const hanldeClick = (selectedRec) => {
    setSelectedData(selectedRec);
    setShow(true);
  };

  const hideModal = () => {
    setShow(false);
  };

  return (
    
      
          {data.map((v) => (
            
          ))}
        
        
          
            Id
            First
            Last
            Location
            Show More
          
        
        
              {v.id}
              {v.firstname}
              {v.lastname}
              @{v.location}
              
                 hanldeClick(v)}>
                  More details
                
              
            
      
      {show && }
    
  );
}

const Modal = ({ handleClose, details }) => {

  return (
    
      
        
          
            
              
                Id
                First
                Last
                Age
                Location
                Address
              
            
            
              
                {details?.id}
                {details?.firstname}
                {details?.lastname}
                {details?.age}
                {details?.location}
                {details?.address}
              
            
          
        
        
      
    
  );
};

Working Demo - https://codesandbox.io/s/awesome-lamarr-hy8hu?file=/src/App.js:0-2625

Espero que estés buscando el mismo caso de uso. Avísame si te enfrentas a algún problema.

Respondida el Dec 18, 2020 a las 10:32 - por quantumcoderd26d

Gpt · Answer

Para lograr mostrar la información detallada de un elemento seleccionado de una tabla en un popup en una aplicación React, puedes seguir los siguientes pasos:

Crear un estado en el componente principal para almacenar la información del elemento seleccionado.

jsx
const [elementoSeleccionado, setElementoSeleccionado] = useState(null);

Cuando se seleccione un elemento de la tabla, actualizar el estado elementoSeleccionado con la información correspondiente.

jsx
const handleElementoSeleccionado = (elemento) => {
    setElementoSeleccionado(elemento);
}

Crear un componente de popup que recibirá la información del elemento seleccionado como una prop.

jsx
const Popup = ({ elemento }) => {
    return (
        
            {elemento && (
                
                    {elemento.titulo}
                    {elemento.descripcion}
                
            )}
        
    );
};

En el componente principal, renderizar la tabla y el popup, pasando la información del elemento seleccionado al popup.

jsx
return (
    
        {/ Renderizar la tabla /}
        {elementos.map((elemento) => (
            {elemento.titulo}
            
        ))}

    {/<strong> Renderizar el popup </strong>/}
    <Popup elemento={elementoSeleccionado} />



);

Con estos pasos, al seleccionar un elemento de la tabla, se mostrará un popup con la información detallada del elemento seleccionado. Asegúrate de adaptar el código a tu estructura actual y de incluir la lógica necesaria para cerrar el popup o limpiar el estado elementoSeleccionado cuando sea necesario.

Respondida el Dec 19, 2020 a las 10:29 - por Gpt

Gemini · Answer

Paso 1: Crear un estado para almacenar los datos del popup javascript import React, { useState } from  react ; const Table = () => { const [popupData, setPopupData] = useState(null); // ... Resto del código de la tabla }; Paso 2: Crear el componente del popup javascript const Popup = ({ data }) => { return ( {/ Mostrar los datos del popup aquí /} {data.id} {data.name} {/ ... Más datos /} ); }; Paso 3: Abrir el popup cuando se selecciona un elemento de la tabla javascript const Table = () => { const [popupData, setPopupData] = useState(null); const handleRowClick = (data) => { setPopupData(data); }; // ... Resto del código de la tabla return ( {/ ... Encabezados de la tabla /} {/ ... Filas de la tabla /} {rows.map((row) => ( handleRowClick(row)}> {/ ... Columnas de la tabla /} ))} ); }; Paso 4: Mostrar el popup si hay datos disponibles javascript const Table = () => { const [popupData, setPopupData] = useState(null); // ... Resto del código de la tabla return ( <> {/ ... Resto del código de la tabla /} {popupData && } ); }; Uso: javascript import Table from  ./Table ; const App = () => { return ( ); }; Explicación: El estado popupData almacena los datos del elemento seleccionado. El componente Popup muestra los datos del elemento. Cuando se selecciona una fila de la tabla, llamamos a handleRowClick que actualiza el estado popupData con los datos del elemento seleccionado. Si hay datos en popupData, mostramos el componente Popup.

Mostrar popup con información traída de un elemento de mesa en la react. js

3 Respuestas:

{elemento.titulo}