- Forums
- react
- [solved] Warning: Failed Prop Type: The Prop `light` Is Marked As Required In `defaultnavbarlink`, B
[solved] Warning: Failed Prop Type: The Prop `light` Is Marked As Required In `defaultnavbarlink`, But Its Value Is `undefined`. [5134], Last Updated: Mon Jun 24, 2024
jackson
Mon May 29, 2023
0 Comments
280 Visits
Warning: Failed prop type: The prop `light` is marked as required in `DefaultNavbarLink`, but its value is `undefined`.
I am using Material Dashboard 2 React at https://github.com/creativetimofficial/material-dashboard-react and today i was testing, i saw this error when I am rendering the mobile version on my firefox console, the error says:
Warning: Failed prop type: The prop `light` is marked as required in `DefaultNavbarLink`, but its value is `undefined`.
To fix:
Open file at: src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.js
1. Add the light prop
CHANGE FROM:
<MDBox px={0.5}>
<DefaultNavbarLink icon="donut_large" name="dashboard" route="/dashboard" />
<DefaultNavbarLink icon="person" name="profile" route="/profile" />
<DefaultNavbarLink icon="account_circle" name="sign up" route="/authentication/sign-up" />
<DefaultNavbarLink icon="key" name="sign in" route="/authentication/sign-in" />
</MDBox>
CHANGE TO:
<MDBox px={0.5}>
<DefaultNavbarLink icon="donut_large" name="dashboard" route="/dashboard" light={light}/>
<DefaultNavbarLink icon="person" name="profile" route="/profile" light={light}/>
<DefaultNavbarLink icon="account_circle" name="sign up" route="/authentication/sign-up" light={light}/>
<DefaultNavbarLink icon="key" name="sign in" route="/authentication/sign-in" light={light}/>
</MDBox>
2. Add the light parameter to DefaultnavBarMoblie Function
CHANGE FROM:
function DefaultNavbarMobile({ open, close }) {
CHANGE TO:
function DefaultNavbarMobile({ open, close, light }) {
3. Open inde.js to add the light parameter to DefaultNavbarMoblie
Open file at: src/examples/Navbars/DefaultNavbar/index.js
CHANGE FROM
{mobileView && <DefaultNavbarMobile open={mobileNavbar} close={closeMobileNavbar}/>}
CHANGE TO:
{mobileView && <DefaultNavbarMobile open={mobileNavbar} close={closeMobileNavbar} light={light} />}
Done