Topic: Pills throwing a strange error
Hi,
It seem I can't get pills working. I get this error
when I leave in <TabContent>. When I comment it out i get the navLinks and the apps works Any ideas?
import React, { Fragment } from 'react' import styles from './Styles.module.scss' import Column from './Column/Controller' import TopRow from './TopRow/Controller' import SelectedEventBox from './EventBox/Controller' import EventCell from './EventCell/Controller' import cls from 'classnames' import { Container, TabPane, TabContent, Nav, NavItem, NavLink } from 'mdbreact' export default (data, togglePills, activeItemPills, list, list2) => ( <Fragment> <div className={cls(styles.timeTable__container, 'row')}> <Container className=""> <Nav pills color="secondary" className="nav-justified "> <NavItem> <NavLink to="#" className={cls({active: activeItemPills === '1'})} onClick={() => { togglePills('1') }}> Active </NavLink> </NavItem> <NavItem> <NavLink to="#" className={cls({active: activeItemPills === '2'})} onClick={() => { togglePills('2') }}> Link </NavLink> </NavItem> <NavItem> <NavLink to="#" className={cls({active: activeItemPills === '3'})} onClick={() => { togglePills('3') }}> Link </NavLink> </NavItem> <NavItem> <NavLink to="#" className={cls({active: activeItemPills === '4'})} onClick={() => { togglePills('4') }}> Help </NavLink> </NavItem> </Nav> <TabContent activeItem={activeItemPills}> <TabPane tabId="1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </TabPane> <TabPane tabId="2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </TabPane> <TabPane tabId="3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </TabPane> <TabPane tabId="4"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </TabPane> </TabContent> </Container> </div>
Add comment
Jakub Mandra staff premium answered 6 years ago
Hi,
For sure you mistaken the link, but no doubts that War Hammer is a good game :)
I see that you pass props from parent, as far as i know, it should be an object
export default ({data, togglePills, activeItemPills, list, list2}) => {}I can't help more for now, will wait for proper error log. Regards, Jakub
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.7.1
- Device: pc
- Browser: Chr
- OS: win
- Provided sample code: No
- Provided link: Yes
Related topics