Intenté buscar una pregunta similar pero no pude encontrar ninguna, disculpa si me perdí una. Estoy usando React Material-UI para crear una aplicación web simple. Tengo un XGrid que enumera una serie de productos y varias estadísticas en un rango de fechas seleccionado por el usuario. Cada fila tiene un botón en el que el usuario puede hacer clic. La idea es que, al hacer clic en el botón, la aplicación llame a una API para obtener información relevante sobre el producto en esa fila. Me gustaría que la información devuelta por la API se muestre en un modal Material-UI.
Me estoy atascando en cómo pasar la información de la API al componente Modal y mostrarla. Tengo un ejemplo simple en el siguiente código que está cerca de lo que quiero lograr.
import "./styles.css"; import React from "react"; import { Button, Modal, Typography, Box } from "@material-ui/core"; export default function App() { const [open, setOpen] = React.useState(false); const handleClose = () => setOpen(false); return ( <div className="App"> <Button variant="outlined" color="primary" onClick={() => { setOpen(true); (async () => { let response = await fetch("https://jsonplaceholder.typicode.com/todos/1"); let apiCall = await response.json(); let grouped_data = JSON.parse(apiCall.data); })(); }} > Click Here </Button> <Modal open={open} onClose={handleClose}> <Box> <Typography>Random Text</Typography> </Box> </Modal> </div> ); }En este ejemplo, aislé el código en un solo App.js en codesandbox. Sin embargo, en la práctica, haría que Button y Modal se combinaran en un archivo de componente separado con la URL de la API pasada como apoyo al componente. También usé JSONPlaceholder en lugar de mi API real. Actualmente, el botón muestra un modal que dice "Texto aleatorio". Sin embargo, me gustaría que mostrara la información recuperada mediante la llamada de búsqueda.
Además, la tabla tendrá miles de filas, por lo que me gustaría evitar llamar a la API hasta que el usuario haga clic en el botón. De esa forma, no sobrecargo el servidor con miles de llamadas API separadas cada vez que alguien carga la página. Agradezco cualquier ayuda que alguien pueda proporcionar.
Sería mejor crear una variable para contener la información recuperada de la API y una función común a la que se llamaría al hacer clic en el botón. Algo como esto:
import "./styles.css"; import React from "react"; import { Button, Modal, Typography, Box } from "@material-ui/core"; export default function App() { const [open, setOpen] = React.useState(false); const [data, setData] = React.useState(null); const handleClose = () => { setOpen(false); setData(null); }; const getData = async (someID) => { try { let response = await fetch( `https://jsonplaceholder.typicode.com/todos/${someID}` ); let apiCall = await response.json(); let grouped_data = JSON.parse(apiCall.data); setOpen(true); setData(grouped_data); } catch (error) { //Handle errors } }; return ( <div className="App"> <Button variant="outlined" color="primary" onClick={() => { getData(someID); }} > Click Here </Button> <Modal open={open} onClose={handleClose}> <Box> <Typography>{data ? data.some_property : ''}</Typography> </Box> </Modal> </div> ); }