Material UI Snackbar autoHideDuration as null - reactjs

Question

I am trying to implement a dynamic Material UI Snackbar that can either have a specific time to "auto-hide" or not. This information will come as props when I call my custom component.
About the autoHideDuration property, the documentation says:
The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value.
I know that if I omit this parameter, my Snackbar will not auto-hide. But if I try to specify this parameter with a null value, I get a Type Error:
Type null is not assignable to type number
Here is the relevant part of the code I have:
const SnackbarComponent = (props: SnackbarProps) => {
const autoHideValue = props.stayOpen ? null : 4000;
return (
<Snackbar
open={ture}
autoHideDuration={autoHideValue} // Type Error on this line
onClose={handleClose}
/>
);
};
And I call it like this:
<SnackbarComponent stayOpen={true} />
The only solution that I could think of, is to have a conditional return. But this doesn't seem like the best way to do it:
const SnackbarComponent = (props: SnackbarProps) => {
if(props.stayOpen){
return (
<Snackbar
open={ture}
onClose={handleClose}
/>
);
} else {
return (
<Snackbar
open={ture}
autoHideDuration={4000}
onClose={handleClose}
/>
);
}
};
Any ideas on how to implement this?

Answer 1

const SnackbarComponent = (props: SnackbarProps) => {
const snackbarProps = {
open: true,
onClose: handleClose,
// this condition solves your problem
...(props.autoHideDuration && { props.autoHideDuration })
// or with default value
// ...(!props.stayOpen && { autoHideDuration: 4000 })
}
return <Snackbar {...snakbarProps} />;
};