0
136
VistasREACCIONAR: Popover no muestra mi contenido json
En el menu/ no se muestra el nombre de mis invitados, solo aparece el InfoIcon de información en la celda. Quiero crear un Popover , cuando haces clic en el InfoIcon , obtienes toda la información de las personas invitadas (nombre y ubicación).
export default function Display() { const { dishes } = JsonData; const [anchor, setAnchor] = useState(null); const openPopover = (event) => { setAnchor(event.currentTarget); }; const data = useMemo( () => [ ... { //Problem: participants not displayed and click not working Header: "Invited", id: "invited", accessor: (row) => row.invited.map(({ name }) => name).join(", "), Cell: (props) => ( <div> <InfoIcon /> <Popover open={Boolean(anchor)} anchorEl={anchor} anchorOrigin={{ vertical: "top", horizontal: "left" }} transformOrigin={{ vertical: "bottom", horizontal: "right" }} > <Typography variant="h1">{props.participants}</Typography> </Popover> </div> ) }, ], [] ); return ( <Table data={dishes} columns={data} /> ); }Aquí está mi código
1 Respuestas
Responde la pregunta0
Además de guardar el elemento en el que se hizo clic en el estado, de modo que el componente Popover tenga una referencia de elemento, también debe almacenar en el estado qué participantes de la fila específica se representarán en el popover. Actualmente, el código usa un valor booleano singular para todos los popovers. Use el row.id para abrir un popover específico.
No olvide agregar el estado "ancla" a la matriz de dependencia para que la ventana emergente obtenga el estado más reciente.
function Display() { const { menus } = JsonData; const [anchorId, setAnchorId] = useState(null); const [anchorEl, setAnchorEl] = useState(null); const openPopover = id => (event) => { setAnchorId(id); setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorId(null); setAnchorEl(null); }; const data = useMemo( () => [ { Header: "Id", accessor: (row) => row.id }, { Header: "Invited", id: "invited", accessor: (row) => row.invited, Cell: (props) => ( <div> {props.value.map(({ name }) => name).join(", ")} <InfoIcon onClick={openPopover(props.row.id)} /> <Popover open={anchorId === props.row.id} onClose={handleClose} anchorEl={anchorEl} anchorOrigin={{ vertical: "top", horizontal: "left" }} transformOrigin={{ vertical: "bottom", horizontal: "right" }} > <Typography variant="h6"> {props.value.map(({ name, location }) => ( <div key={name}> <p>{name}</p> <p>Location: {location}</p> </div> ))} </Typography> </Popover> </div> ) }, { Header: "Title", accessor: (row) => ({ title: row.title, id: row.id }), Cell: ({ value }) => ( <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link> ) } ], [anchorEl, anchorId] ); const initialState = { sortBy: [ { desc: false, id: "id" }, { desc: false, id: "invited" }, { desc: false, id: "title" } ] }; return ( <Table data={menus} columns={data} initialState={initialState} withCellBorder withRowBorder withSorting withPagination /> ); } 