I am working on a navbar in react and i have been getting this error, and i have not found a working solution yet. Here is the piece of my code. I am trying to use react prop-types library to validate my navbar props with either a link or a dropdown. Below is the piece of code i have written.
NavBar.js
const NavBar = ({ navItems }) => {
return (
<nav role="navigation" className={styles.navBar}>
<Logo type="text">
ABCD
</Logo>
<div className={[styles.collapse, styles.noCollapse].join(' ')}>
<SearchBox />
<NavItems navItemsData={navItems} />
</div>
</nav>
);
};
NavItems.js
const NavItems = ({ navItemsData }) => {
return (
<ul className={styles.navItems}>
{navItemsData.map(navItemData => {
let navItem = <NavItem {...navItemData} key={navItemData.id} />
if (navItemData.type === 'dropdown') {
navItem = <NavDropDownItem {...navItemData} key={navItemData.id} />
}
return navItem;
})}
</ul>
);
};
PropTypes Checker(in same file as NavItems) :-
NavItems.propTypes = {
navItemsData: PropTypes.arrayOf(PropTypes.shape({
id : PropTypes.number,
type: PropTypes.oneOf(['link', 'dropdown']).isRequired,
linkText: requiredIf(PropTypes.string.isRequired, props => props.type === 'link'),
title : requiredIf(PropTypes.string.isRequired, props => props.type === 'dropdown'),
dropDownList: requiredIf(PropTypes.arrayOf(PropTypes.shape({ linkText: PropTypes.string.isRequired })), props => props.type === 'dropdown')
}))
};
I keep getting this warning in the console. As follows :-
Warning: Failed prop type: Cannot read property 'apply' of undefined
in NavItems (at NavBar.js:15)
in NavBar (at App.js:35)
in div (at App.js:34)
in App (at src/index.js:7)
The props i am passing :
const navItems = [{
id : 1,
type : 'link',
linkText : 'Link1'
},{
id : 2,
type : 'link',
linkText : 'Link2'
}, {
id : 3,
type : 'link',
linkText : 'Link3'
}, {
id : 4,
type : 'link',
linkText : 'Link4'
},{
id : 5,
type : 'link',
linkText : 'Link5'
},{
id : 6,
type : 'dropdown',
dropDownList : [{
linkText : 'LinkText'
}]
}]
Any help would be appreciated.
When you are using requiredIf, the first parameter should be the expected type. But it should not have the isRequired part. For example, your validation should be as follows.
NavItems.propTypes = {
navItemsData: PropTypes.arrayOf(PropTypes.shape({
id : PropTypes.number,
type: PropTypes.oneOf(['link', 'dropdown']).isRequired,
linkText: requiredIf(PropTypes.string, props => props.type === 'link'),
title : requiredIf(PropTypes.string, props => props.type === 'dropdown'),
dropDownList: requiredIf(PropTypes.arrayOf(PropTypes.shape({ linkText: PropTypes.string.isRequired })), props => props.type === 'dropdown')
}))};
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments