javascript - Received `false` for a non-boolean attribute `loading` - Stack Overflow

admin管理员组

文章数量:1187302

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>
    )
}

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>
    )
}

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Aug 8, 2019 at 6:56 frogatto 29.3k1313 gold badges8989 silver badges134134 bronze badges asked Aug 8, 2019 at 5:44 cameraguy258cameraguy258 67933 gold badges1010 silver badges2121 bronze badges 4

• This may help you - stackoverflow.com/questions/44375759/… – ravibagul91 Commented Aug 8, 2019 at 5:58
• This doesn't address my issue, which is a JavaScript error (not a TypScript error) – cameraguy258 Commented Aug 8, 2019 at 6:15
• How are you calling the component? <LoadingButton disabled={false} loading="false">My Button</LoadingButton> – It'sNotMe Commented Aug 8, 2019 at 6:33
• Yes that's correct. – cameraguy258 Commented Aug 8, 2019 at 7:16

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 27

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?

本文标签： javascriptReceived false for a nonboolean attribute loadingStack Overflow