I am into a strange problem, i am sure missing something.

Here is my Box function/component

export interface BoxProps extends React.HTMLProps<HTMLDivElement> {
    padding?: boolean
    stretch?: boolean
    flex?: boolean
    column?: boolean
    clickable?: boolean
    gap?: boolean
}

function Box (props: BoxProps) {
    return <div className={clsx(
        'flexbox',
        props.column && 'column',
        props.stretch && 'stretch',
        props.padding && 'padding',
        props.flex && 'flex',
        props.clickable && 'clickable',
        props.gap && 'gap',
        props.className
    )} {...props} />
}

Box.defaultProps = {

    padding: false,
    stretch:  false,
    flex:  false,
    column:  false,
    clickable:  false,
    gap:  false,
}

export default Box

props are all booleans, with a default value = false, and all are nullable (obviously)

But i still have this warning in my console :

Warning: Received false for a non-boolean attribute clickable.

I got this warning for each props

I don't get how i can make a component like this :

<Box gap stretch>{children}</Box> as Equivalent to <Box gap={true} ...

Withotu having this warning.

I v tried many things, i probably can't tell you every one

CodePudding user response：

It's because div element does not have any of these attributes (padding or gap or etc).

You should remove {...props} part in your code. So it would be like this:

function Box (props: BoxProps) {
    return <div className={clsx(
        'flexbox',
        props.column && 'column',
        props.stretch && 'stretch',
        props.padding && 'padding',
        props.flex && 'flex',
        props.clickable && 'clickable',
        props.gap && 'gap',
        props.className
    )} />
}