Tab Error in React : Check the render method of TabPanel

Question

I want to use material design tab with below code :

import React, { PureComponent } from 'react'
import { Field, reduxForm,change } from 'redux-form'
import PropTypes from 'prop-types'

import { Update,Get } from '../../_actions/baseInfo/reseller'
import { connectTo } from '../../_utils/generic'
import { isValid } from '../../_utils/forms'
import textfield from '../../_components/fields/textfield/textfield'
import UpdateForm from '../../_components/updateForm/updateForm'
import styles from './Styles.module.scss'
import { getCustomerType } from '../../_actions/generic'
import { withStyles } from '@material-ui/core/styles'
import { Filter as FilterResellers } from '../../_actions/baseInfo/reseller'
import { Filter as FilterRegions } from '../../_actions/baseInfo/region'
import { Filter as FilterCities } from '../../_actions/baseInfo/city'
import { Filter as FilterAccounting } from '../../_actions/baseInfo/accounting'
import filterField from '../../_components/fields/filterField/FilterField'
import {AppBar, Tab,Tabs } from '@material-ui/core';
import {Typography} from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'
import { Paper } from '@material-ui/core';
import selectField from '../../_components/fields/selectField/selectField'
import classNames from 'classnames';
import dateField from '../../_components/fields/dateField/dateField'
import checkbox from '../../_components/fields/checkbox/checkbox'
import { Break } from '../../_components/Break';
import filefield from '../../_components/fields/filefield/filefield';
....

function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
      <Typography
        component="div"
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        <Box p={3}>{children}</Box>
      </Typography>
    );
  }


  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  };


class UpdatePage extends PureComponent {

    constructor(props) {
        super(props)

        this.state = {
          value:0,
        }
    }

    handleChange(event, newValue){
          this.setState({value:newValue})
    }

    a11yProps(index) {
        return {
          id: `simple-tab-${index}`,
          'aria-controls': `simple-tabpanel-${index}`,
        };
    }

    componentDidMount() {
        const { Get,match:{params:{resellerId}} } = this.props
        Get({resellerId})

    }

    render() {

        const { handleSubmit, enabledSubmit,match:{params:{resellerId}} } = this.props
        const fields = [
            <div>
                <AppBar position="static">
                    <Tabs onChange={this.handleChange} value={this.state.value} aria-label="simple tabs example">
                        <Tab label="One" {...this.a11yProps(0)} />
                        <Tab label="Two" {...this.a11yProps(1)} />
                        <Tab label="Three"  {...this.a11yProps(2)} />
                    </Tabs>
                </AppBar>
                <TabPanel value={this.state.value} index={0}>
                    <label>1</label>
                </TabPanel>
                <TabPanel value={this.state.value} index={1}>
                    <label>2</label>
                </TabPanel>
                <TabPanel value={this.state.value} index={2}>
                    <label>3</label>
                </TabPanel>
            </div>

        ]
....

but occur below error :

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TabPanel.

Looks like you missed an import or got the wrong import. Would be able to paste the rest of the code? — Praneeth Paruchuri

Jackkobec Jackkobec · Accepted Answer · 2019-09-07T19:03:44

Where is render return statement? Add return fields;

render() {

        const { handleSubmit, enabledSubmit,match:{params:{resellerId}} } = this.props
        const fields = [
            ...
        ];

        return fields;
}

Tab Error in React : Check the render method of TabPanel

2 Answers