How to parse data from checkboxSelection MUI to a variable?

406 Views Asked by At

I'm using DataGrid from MUI, it does have a checkbox function and I want to use it so that when I check it it adds the row data to a variable (the id, name, etc etc) so I can use it somewhere else with useLocation but it doesn't seem to be working ? I did a small test just to see if it was doing anything but it doesn't even show the console.log there's what I try:

.........

const [studentsID, setStudentsID] = useState([]);
  function currentlySelected(estudiantes) {
    setStudentsID(estudiantes)
    console.log(studentsID)
  }

...........

<DataGrid
        rows={estudiantes}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        onSelectionChange={currentlySelected}
        components={{
          Toolbar: CustomToolbar,
        }}
        
      />

All I want to do is to be able to send data to another page so I can work with the uid of the data and grab internal values such as (name, lastname) and that sort of thing let me know if you require anything else, any help/tips/documentation is welcome.

UPDATED This is my whole code in case you need it:

import React, { useState, useEffect, Fragment } from 'react'
import {db} from './firebase';
import { useHistory, useLocation } from 'react-router-dom';
import "./ListadoEstudiantes.css"
import * as locales from '@mui/material/locale';
import { DataGrid, 
  GridToolbarContainer, 
  GridToolbarColumnsButton, 
  GridToolbarFilterButton, 
  GridToolbarExport, 
  GridToolbarDensitySelector } from '@mui/x-data-grid';
import { Button, Container } from "@material-ui/core";
import PersonAddIcon from '@mui/icons-material/PersonAddSharp';
import { Box } from '@mui/system';

function ListadoEstudiantes({user}) {

  const history = useHistory("");
  const crearEstudiante = () => {
    history.push("/Crear_Estudiante");
  };

 const [estudiantes, setEstudiantes] = useState([]);
 const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")

 useEffect(() => {
  estudiantesRef.onSnapshot(snapshot => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
    });
    setEstudiantes(tempData);
  })
 }, []);

 function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
    </GridToolbarContainer>
  );
}

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },

  {field: 'nombre', headerName: 'Nombre', width: 200},

  {field: 'colegio', headerName: 'Colegio', width: 250},

  {field: 'grado', headerName: 'Grado', width: 150}
]

    return (
      <Container fixed>
      <Box mb={5} pt={2} sx={{textAlign:'center'}}>
      <Button
      startIcon = {<PersonAddIcon />} 
      variant = "contained" 
      color = "primary" 
      size = "medium" 
      onClick={crearEstudiante} >
      Crear Estudiantes
      </Button>
      <Box pl={25} pt={2} sx={{height: '390px', width: "800px", textAlign:'center'}}>
      <DataGrid
        rows={estudiantes}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}

        components={{
          Toolbar: CustomToolbar,
        }}

        checkboxSelection
        onSelectionModelChange={(id) => {
          const selectedIDs = new Set(id);
          const selectedRowData = estudiantes.filter((row) =>
            selectedIDs.has(row.id.toString())
          );
          console.log(selectedRowData, selectedIDs );
        }}
        {...estudiantes}
        
      />
      </Box></Box></Container>
    )
}

export default ListadoEstudiantes

UPDATE No longers grants me an error but it doesn't seem to be saving the data

enter image description here

0

There are 0 best solutions below