non-boolean attribute ⚛️ React

Warning: Received `true` for a non-boolean attribute `x`.

A boolean was passed to a DOM attribute that expects a string, or a custom prop leaked through to a DOM element.

Seen on: React

Meaning

Custom props spread onto DOM elements (often via styled-components or {...props}) end up as invalid HTML attributes.

Common causes

  • Spreading all props onto a DOM element
  • styled-components passing custom props to the DOM
  • Using a boolean for an attribute like data-* without converting

⚡ Quick fix

  1. Destructure custom props before spreading
  2. Use transient props ($active) in styled-components
  3. Convert to strings: attr={value ? 'true' : undefined}

Detailed fix by platform

React

  1. const Button = styled.button\opacity: ${p => (p.$disabled ? 0.5 : 1)};\;

How to diagnose

  1. Attribute — Which prop is named?
  2. Source — Which element receives it?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.