Publiqué esto aquí porque soy relativamente nuevo en React y no sabía exactamente qué debería buscar en Google. En mi proyecto React, tengo una cuadrícula de kendo que tiene una columna personalizada llamada OPCIONES, como esta:

 <Grid onDataStateChange={onDataStateChange} data={result} {...{skip:0, take:13}}> <GridColumn cell={CommandCell} title="Options"/> <GridColumn field="session_id" title="Session" filter='text'/> <GridColumn field="sn_zag_id" title="Service" filter='text'/>

La columna Opción se define así:

 const [visible2, setVisible2] = useState(false); const [snZagId, setSnZagId] = useState(); const toggleDialogPrilog = (props) => { setVisible2(!visible2); setSnZagId(props.dataItem.sn_zag_id) } const CommandCell = (props) => <Options {...props}/> const Options= (props) => { return <td className="k-command-cell"> <div style={{marginTop:'2%'}}> <Button style={{width:'8vw',marginTop:'2%'}} onClick={()=>toggleDialogPrilog(props)}> Add </Button></>} </div> { visible2 && <Dialog onClose={()=> toggleDialogPrilog()} title={"Add"} style={{width:'50%'}}> <Prilog snZagId={snZagId}/> </Dialog> } </td>;}

Entonces, en la columna de opciones tengo un botón AGREGAR que, cuando se hace clic, abre un cuadro de diálogo con el componente PRILOG dentro. La cuadrícula de la que hablo es grande, compuesta por páginas de 13 filas. Todo funciona perfectamente, así que cuando hago clic en el botón Agregar, se abre el cuadro de diálogo con material personalizado para esa fila. Pero la cuestión es que, si abro la consola/inspecciono, puedo ver que cuando hago clic en Agregar, se abren 13 cuadros de diálogo al mismo tiempo:

Soy consciente hasta cierto punto de que cuando hago clic en Agregar, todos los cuadros de diálogo se representan porque envío accesorios, pero no sé cómo detenerlo. En otras palabras, ¿cómo puedo modificar mi código para que solo se abra un (1) cuadro de diálogo cuando hago clic en Agregar?