Typography on React-Hooks causes abbr & abbrLeftText warning


Topic: Typography on React-Hooks causes abbr & abbrLeftText warnings

kzhan00b asked 5 years ago

Hi there,

Currently using MDBootstrap-React, and using typography component.

<MDBTypography tag="h4" variant="h4-responsive">{name}</MDBTypography>

Rendering of the typography component has no issue and all, but chrome is logging a warning on the console:

index.js:1 Warning: Received `false` for a non-boolean attribute `abbr`.

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

If you used to conditionally omit it with abbr={condition && value}, pass abbr={condition ? value : undefined} instead.
in h4 (created by Typography)
in Typography (at pid-compliance-summary-view.js:25)
in div (created by Container)
in Container (at pid-compliance-summary-view.js:24)
in RenderComponentCard (at pid-compliance-summary-view.js:38)
... 
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:16)

and

Warning: React does not recognize the `abbrLeftText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `abbrlefttext` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in h4 (created by Typography)
in Typography (at pid-compliance-summary-view.js:25)
in div (created by Container)
in Container (at pid-compliance-summary-view.js:24)
in RenderComponentCard (at pid-compliance-summary-view.js:38)
...
in Switch (at app.js:9)
in App (at src/index.js:17)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:16)

I can remove the first warning (recieved false for non-bool attribute abbr) by adding props to the Typography component (abbr="false").

<MDBTypography tag="h4" variant="h4-responsive" abbr="false">{name}</MDBTypography>

but i'm not too sure how to remove the warning for abbrLeftText.

Please advise on how i can remove these warnings.

Thank you!


Piotr Glejzer staff commented 5 years ago

Hi,

thanks for this topic. This warning for abbrleftext is showing because we don't have that props in our package.

Best,
Piotr


kzhan00b commented 5 years ago

Noted with thanks.

I will use the Typography component and just attempt to ignore this warning for now. will there be any functionality issues regarding this issue?


Piotr Glejzer staff commented 5 years ago

No, this is just a warning. I removed that from that component and everything should work correctly.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.1
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No