Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

En anpassad React-prop skickas vidare till ett DOM-element, vilket webbläsaren inte förstår.

Förklaring

React-props och HTML-attribut är inte samma sak. Props är JavaScript-värden som React hanterar internt, medan HTML-attribut är strängar som skrivs in i DOM. Props som inte matchar ett känt HTML-attribut ska aldrig spridas till DOM-element.

Felet är vanligast med komponentabstraktion: en wrapper-komponent tar emot en prop och sprider alla sina props vidare med {...props} till ett underliggande <div> eller <button>. Den anpassade proppen hamnar då på DOM-elementet och webbläsaren vet inte vad den ska göra med den.

I Next.js uppstår det ofta med animationsbibliotek, UI-bibliotek, och egna designsystemkomponenter.

Vanliga orsaker

Spread av props med {...props} på ett DOM-element utan att filtrera bort anpassade props. En komponent vidarebefordrar alla mottagna props inklusive logiska flaggor till det underliggande HTML-elementet.

Lösning

Destrukturera bort anpassade props innan spread:

// Fel — isActive hamnar på <button> i DOM
function Button({ isActive, ...props }) {
  return <button {...props} />;
}

// Rätt — använd isActive lokalt och sprid bara HTML-kompatibla props
function Button({ isActive, children, onClick, className }) {
  return (
    <button
      onClick={onClick}
      className={`${className ?? ''} ${isActive ? 'active' : ''}`}
    >
      {children}
    </button>
  );
}

Vid användning av styled-components eller liknande bibliotek används $-prefix, till exempel $isActive, för att markera att en prop inte ska spridas till DOM.