Pills throwing a strange error

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>

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

blackflow

Pro User 40Support score
6Questions 1Answers 0Snippets