0

enter image description here

How to remove this Warning: React does not recognize the showLabel prop on a DOM element.

Warning message showing on console log.

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

Shashimal Kawinda Wanninayake
  • 49
  • 1
  • 1
  • 7
  • 3
    Without seeing your exact code, it's hard to say. I'd guess you're doing something like `
    ` and showLabel doesn't exist on a native dom element (`div`). The error message is pretty helpful.     – Tom Dec 21 '22 at 19:51
  • Can you show how your parent is providing the props? Here you have a good reference for search: https://reactjs.org/warnings/unknown-prop.html – Alex W. Andreza Dec 21 '22 at 19:53

1 Answers1

5

This error appears when a React component prop ends up being added as an attribute on a DOM element.

Typically this error will appear when passing props to a component that then uses the spread operator to pass them into another component. Consider a contrived example like this:

const ParentComponent = () => {
  return (<ChildComponent showLabel={true} />);
}

const ChildComponent = (props) => {
  return (
    <div {...props}>blah blah blah</div>
  )
}

In this case the showLabel prop that you passed to ChildComponent ends up being rendered as an attribute on a div tag, which isn't allowed as indicated by the error message you're seeing.

Make sure any props that you're passing into a component are accounted for, and if necessary remove them or destructure and only pass the necessary props to the next component:

const ChildComponent = (props) => {
  const { someLabel, ...rest } = props;
  return (
    <div {...rest}>blah blah blah</div>
  )
}
Charlie Stanard
  • 909
  • 2
  • 9
  • 19