React does not recognize the `hasShow` prop on a DOM element

Question

react-admin: 3.8.4

I have a simple show structure as below:

const OfferShow = (props) => {

  return (
    <Show component="div" title={<PageTitle text="Oferta" prop="title" />} {...props}>
      <SimpleShowLayout>
    
      </SimpleShowLayout>
    </Show >
  )
}

export default OfferShow;

if I remove the tag <SimpleShowLayout> I don't see this error anymore, if I put the tag the error is:

index.js:1 Warning: React does not recognize the `hasShow` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `hasshow` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ShowView)
    in ShowView (created by Show)
    in Show (at OfferShow.js:23)
    in OfferShow (created by WithPermissions)
    in WithPermissions (created by... 

Does anyone already got this error and could help me?

Answer 1

You can remove an unwanted prop such as hasShow and still use the spread operator like this:

const OfferShow = ({ hasShow, ...rest }) => {

  return (
    <Show component="div" title={<PageTitle text="Oferta" prop="title" />} {...rest}>
      <SimpleShowLayout>

      </SimpleShowLayout>
    </Show >
  )
}

export default OfferShow;