CODEWITHSUNDEEP
reactjsstyled-componentsemotion
Antonio Santoro
Antonio Santoro

Reputation: 267

Warning: Received `false` for a non-boolean attribute `applied`

I'm rendering a styled component defined by

const FilterIcon = styled(TbFilter)<{ applied: boolean }>(({applied}) => ({
  color: applied ? 'transparent' : colors.blue[500],
  fill: applied ? fillLinearGradient(colors.blue[300], colors.blue[500]) : undefined,
}))

like

  return (
    <>
      <IconButton>
        <FilterIcon fontSize={ICON_SIZE} applied={applied} />
      </IconButton>
      {childrens}
    </>
  )

where applied is a boolean defaulted to false.

But React is complaining

Warning: Received `false` for a non-boolean attribute `applied`.

If you want to write it to the DOM, pass a string instead: applied="false" or applied={value.toString()}.

If you used to conditionally omit it with applied={condition && value}, pass applied={condition ? value : undefined} instead.

Does Emotion support non-string props?

EDIT:

Changing to

const FilterIcon = styled(TbFilter)<{ $applied: boolean }>`
  color: ${(props) => props.$applied ? 'transparent' : colors.blue[500]};
  fill: ${(props) => props.$applied ? fillLinearGradient(colors.blue[300], colors.blue[500]) : undefined};
`

  return (
    <>
      <IconButton>
        <FilterIcon fontSize={ICON_SIZE} $applied={applied}/>
      </IconButton>
      {childrens}
    </>
  )

gives me

Warning: Invalid attribute name: `$applied`

Upvotes: 0

Views: 999

Answers (2)

Antonio Santoro
Antonio Santoro

Reputation: 267

The solution is to use as suggested by https://stackoverflow.com/users/2822041/someone-special

const FilterIcon = styled(TbFilter, {
  shouldForwardProp: (prop) => !prop.startsWith('$'),
})<{ $applied: boolean }>(({ $applied }) => ({
  color: $applied ? 'transparent' : colors.blue[500],
  fill: $applied
    ? fillLinearGradient(colors.blue[300], colors.blue[500])
    : undefined,
}))

Upvotes: 1

Mohamad Ahmadi
Mohamad Ahmadi

Reputation: 277

styled components pass attributes to dom

if your variable start with $ its prevent to passing to dom

try to replace applied with $applied in entire code.

Upvotes: 1

Related Questions