I'm using Material UI library with React + Typescript.
When trying to pass conditional boolean as "button" prop of component I'm getting typescript error: Type 'boolean' is not assignable to type 'true'
I attached codesandbox link:
https://codesandbox.io/s/fragrant-worker-2l67x?file=/src/App.tsx
TLD'R
<ListItem
button={item.isTitle ? undefined : true}
divider={item.isTitle}
key={item.text}
>
The explanation
In order to show a ListItem as button, you pass the button prop. If you don't want it to be button, you can pass false but it conflicts with the true type.
The other option to not show it as button is to not add the button prop at all. But how this helps you're asking? I have to set this prop for "not title" items.
So not passing a prop is like passing undefined. Since button is optional you can pass it as undefined instead of false.
https://codesandbox.io/s/so-67523398-lhgud?file=/src/App.tsx:1874-1914