Topic: Pills throwing a strange error

blackflow pro asked 6 years ago


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>

Jakub Mandra staff 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

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: 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