En esta aplicación web, tenemos 3 tipos diferentes de usuarios: Participantes, Voluntarios y Personal. Los voluntarios son los únicos usuarios que almacenamos su "disponibilidad" en horarios que el personal puede ver haciendo clic en el botón "Ver horario de voluntarios" junto a su fila en DataGrid.

Así es como se ve el DataGrid:

Imagen de cuadrícula de datos

En el extremo izquierdo, hay botones que abrirán una nueva pestaña con la información del horario del usuario.

Esta es la función de ese botón en ManageUser.jsx:

 /** * View Volunteer Schedule * @param e */ function viewVolunteerSchedule(e) { if (e.row.data.role !== "Volunteer") { alert("This user is not a volunteer.", "Error"); } else { let volunteerEmail = e.row.data.email; window.open("/admin/view-volunteer-schedule?email=" + volunteerEmail) } }

lo que quiero averiguar es que, en lugar de que este botón aparezca en cada fila, muestre un mensaje de error cuando se haga clic en un no voluntario: ¿cómo hago para que este botón solo aparezca en las filas donde se cumple la condición? "este usuario es un voluntario"?

El <DataGrid> en la declaración de devolución tiene el siguiente componente para representar esta columna:

 <Column type={"buttons"}> <Button text="View Schedule" icon="event" hint="View Volunteer Schedule" onClick={viewVolunteerSchedule}> </Button> </Column>

¿Cómo hago para acceder a la variable de "rol" de esta fila en particular en una cuadrícula de datos? ¿Para que pueda hacer que este botón solo sea visible bajo ciertas condiciones?

Intenté agregar la línea:

 visible={data.role==='Volunteer'}

pero estos no parecen ser los datos correctos, ya que solo los hizo invisibles. Cualquier ayuda o consejo es muy apreciado.