I've created a custom button component based on Material-UI's Button component, so I can overlay a loading circle whenever an action is pending. However, React complains with the following:
Warning: Received false
for a non-boolean attribute loading
.
If you want to write it to the DOM, pass a string instead: loading="false" or loading={value.toString()}.
Here's what my component looks like. Thanks in advance!
import * as React from 'react'
import { ButtonProps } from '@material-ui/core/Button'
import { Button, CircularProgress } from '@material-ui/core'
interface IProps extends ButtonProps {
loading: boolean
}
export const LoadingButton = (props: IProps) => {
const { disabled, loading } = props
return (
<div className='button-container'>
<Button {...props} disabled={disabled == true || loading == true}/>
{loading == true && (
<CircularProgress size={24} className='button-progress' />
)}
</div>
)
}
You shouldn't pass your custom props down to the Button.
Replace
const { disabled, loading } = props
with
const { disabled, loading, ...rest } = props
and then
<Button {...rest} disabled={disabled || loading}/>
Your problem is that you are passing all your props to the Button
component. Remove {...props}
from <Button />
and declare the attributes separately.
Looking at the documentation, you can see that loading
it is not an attribute on the Button
component, but the spread operator ...
still add it.
<div className="button-container">
<Button disabled={disabled === true || loading === true} />
{loading === true && <CircularProgress size={24} className="button-progress" />}
</div>
)
Also, as a side note, I recommend that you use the ===
identity operator instead of the ==
equality operator. See this post Which equals operator (== vs ===) should be used in JavaScript comparisons?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With