Soy nuevo en React y JSX. Estoy creando un botón cuando al hacer clic se abre un cuadro de diálogo con una tabla dentro (1x3) que tiene nombre, estado y error de excepción como "cadenas".
Por alguna razón, cuando hago clic en el botón, puedo ver que se muestra la instrucción console.log() en mi consola, pero no aparece nada como un cuadro de diálogo emergente (por lo tanto, cualquier cosa dentro de la instrucción return()) .
const isFailed = () => { console.log(testCase["test-method"][0].status); //alert(testCase["test-method"][0].exception); return( <Dialog maxWidth="xl" open={open} onClose={() => setOpen(false)}> <DialogTitle>{testCase.name} Summary</DialogTitle> <DialogContent> <Table> {steps.map((val) => ( <TableRow key={val.name}> <TableCell>{val.name}</TableCell> <TableCell>{val.status}</TableCell> <TableCell>{val.exception}</TableCell> </TableRow> ))} </Table> </DialogContent> </Dialog> ); }EDITAR: el controlador del botón onClick llama a la función isFailed
const steps = testCase["test-method"]; return ( <> <TableRow key={key} style={{ cursor: "pointer" }} onClick={() => setOpen(true)}> <TableCell>{testCase.name}</TableCell> <TableCell>{testCase.duration}</TableCell> <StatusCell fail={testCase.fail} skip={testCase.skip} /> <TableCell>{(typeof(testCase["test-method"][0].exception) == typeof("string")) ? <div> <Button onClick = {isFailed} color = "primary">View Error</Button> </div>: null}</TableCell> </TableRow> </> );Si alguien me puede ayudar con esto, será increíble. Gracias.
No puede usar el método de retorno dentro de una función onClick. Es posible que deba mantener un estado separado para manejar la función onclick.
const steps = testCase["test-method"]; return ( <> <TableRow key={key} style={{ cursor: "pointer" }} onClick={() => setOpen(true)}> <TableCell>{testCase.name}</TableCell> <TableCell>{testCase.duration}</TableCell> <StatusCell fail={testCase.fail} skip={testCase.skip} /> <TableCell>{(typeof(testCase["test-method"][0].exception) == typeof("string")) ? <div> <Button onClick = {isFailed} color = "primary">View Error</Button> </div>: null}</TableCell> </TableRow> </> {isClicked && <Dialog maxWidth="xl" open={open} onClose={() => setOpen(false)}> <DialogTitle>{testCase.name} Summary</DialogTitle> <DialogContent> <Table> {steps.map((val) => ( <TableRow key={val.name}> <TableCell>{val.name}</TableCell> <TableCell>{val.status}</TableCell> <TableCell>{val.exception}</TableCell> </TableRow> ))} </Table> </DialogContent> </Dialog> } );En la función onClick simplemente establezca el valor booleano de la función isClicked .
const [isClicked, setIsClicked] = React.useState(false);
const isFailed = () => { setIsClicked(true); }