What I want is when the studentCount is greater than zero then the collapse automatic open and the Typography(viewStudentList) will 'Close', and when the studentCount is equal to zero then the collapse are close and the text on 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>
}
in this update i can show the studentlists if the studentCount is greater than zero but the only problem is the button doesnt work. the button function is it will close the collapse and view collapse
I'm not sure I fully understand the question, but does something like that works for you:
const StudentWidget = ({ countStudent }) => {
// ...
const showStudentList = countStudent > 0;
return (
<div>
<Typography>{showStudentList ? "Close" : "View"}</Typography>
<Collapse in={showStudentList}>Student list here</Collapse>
</div>
);
};
I created a sandbox to show how it could be used: https://codesandbox.io/s/goofy-chatterjee-nyfnj?file=/src/App.js
You see that if studentCount reach 0, the content is not displayed.
If i understand it correctly, it works but when the button is pressed and the list is visible nothing happens?
in that case it seems you need to create a state to keep track of if the user has clicked the button to close the list.
//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' }}>