Lo que quiero es que cuando StudentCount sea mayor que cero, el colapso se abra automáticamente y Typography(viewStudentList) se 'Cerrará', y cuando StudentCount sea igual a cero, entonces el colapso se cerrará y el texto en Typography(viewStudentList) 'View ',
const onHandleSetViewStudentList = () => { if (!viewStudentList) { mapDiv.current.popup.close(); } if (viewStudentList) { onHandleSetActiveStudent(''); } setViewStudentList(!viewStudentList); }; <StudentWidget setViewStudendList={onHandleSetViewStudentList} viewStudentList={studentList.length > 0 ? true : false} countStudent={studentList.length} />///
const propTypes = { countStudent: PropTypes.func, viewStudentList: PropTypes.bool, }; const defaultProps = { countStudent:'' viewStudentList: false, }; const StudentWidget = ({ countStudent, viewStudentList, }) => { .... <Typography sx={{ color: 'rgba(64, 66, 70, 1)' }}> {viewStudentList ? 'Close' : 'View'} </Typography> <Collapse in={viewStudentList} sx={{ my: '1px' }}> ..... </Collapse> }en esta actualización, puedo mostrar las listas de estudiantes si el número de estudiantes es mayor que cero, pero el único problema es que el botón no funciona. la función del botón es que cerrará el colapso y verá el colapso
No estoy seguro de entender completamente la pregunta, pero algo así funciona para usted:
const StudentWidget = ({ countStudent }) => { // ... const showStudentList = countStudent > 0; return ( <div> <Typography>{showStudentList ? "Close" : "View"}</Typography> <Collapse in={showStudentList}>Student list here</Collapse> </div> ); };Creé una caja de arena para mostrar cómo podría usarse: https://codesandbox.io/s/goofy-chatterjee-nyfnj?file=/src/App.js
Verá que si studentCount llega a 0 , el contenido no se muestra.
Si lo entiendo correctamente, funciona, pero cuando se presiona el botón y la lista está visible, ¿no pasa nada?
en ese caso, parece que necesita crear un estado para realizar un seguimiento de si el usuario ha hecho clic en el botón para cerrar la lista.
//something like this const [showList, setShowList] = useState(viewStudentList); //and set that when the button is clicked const handleClick = () => { setShowList(prevShowList => !prevShowList)) } //and than use that variable together with the viewStudentList variable <Collapse in={viewStudentList && showList} sx={{ my: '1px' }}>