javascript - react-swipable-views shows error when used

I'm trying to use react-swipable-views in my react application. I'm getting the following error :- Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object.

I've imported it as follows:

import SwipeableViews from "react-swipeable-views";

Usage:


import React, { Component } from 'react';
import './../index.css';
import { 
    Tabs, 
    Tab, 
    Grid, 
    Paper, 
    Typography,
    Box,
    Icon
} from '@material-ui/core';
import PropTypes from 'prop-types';


import A from './ponents/A/A';
import B from './ponents/B/B';
import C from './ponents/C/C';
import D from './ponents/D/D';
import E from './ponents/E/E';


import SwipeableViews from "react-swipeable-views";

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

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

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

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

export default class Entities extends Component {

    state = {
        value: 0
    }

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

    handleChangeIndex = index => {
        this.setState({value: index});
    }

    render() {
        const {value} = this.state;

        return(
            <div className="container-info">
                <Grid container>
                    <div className="padding-top-4 padding-left-0">
                        <Paper>
                            <Tabs value={value} onChange={this.handleChange}>
                                <Tab label={<span className="font-bold">A</span>}/>
                                <Tab label={<span className="font-bold">B</span>}/>
                                <Tab label={<span className="font-bold">C</span>}/>
                                <Tab label={<span className="font-bold">D</span>}/>
                                <Tab label={<span className="font-bold">E Types</span>}/>
                            </Tabs>
                        </Paper>
            <SwipeableViews>
                            <TabPanel value={value} index={0}>
                                <A />
                            </TabPanel>
                            <TabPanel value={value} index={1}>
                                <B />
                            </TabPanel>
                            <TabPanel value={value} index={2}>
                                <C />
                            </TabPanel>
                            <TabPanel value={value} index={3}>
                                <D />
                            </TabPanel>
                            <TabPanel value={value} index={4}>
                                <E />
                            </TabPanel>
            </SwipeableViews>
                    </div>
                </Grid>
            </div>
        );
    }
}

 }

How do I resolve this error?

I've imported it as follows:

import SwipeableViews from "react-swipeable-views";

Usage:


import React, { Component } from 'react';
import './../index.css';
import { 
    Tabs, 
    Tab, 
    Grid, 
    Paper, 
    Typography,
    Box,
    Icon
} from '@material-ui/core';
import PropTypes from 'prop-types';


import A from './ponents/A/A';
import B from './ponents/B/B';
import C from './ponents/C/C';
import D from './ponents/D/D';
import E from './ponents/E/E';


import SwipeableViews from "react-swipeable-views";

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

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

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

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

export default class Entities extends Component {

    state = {
        value: 0
    }

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

    handleChangeIndex = index => {
        this.setState({value: index});
    }

    render() {
        const {value} = this.state;

        return(
            <div className="container-info">
                <Grid container>
                    <div className="padding-top-4 padding-left-0">
                        <Paper>
                            <Tabs value={value} onChange={this.handleChange}>
                                <Tab label={<span className="font-bold">A</span>}/>
                                <Tab label={<span className="font-bold">B</span>}/>
                                <Tab label={<span className="font-bold">C</span>}/>
                                <Tab label={<span className="font-bold">D</span>}/>
                                <Tab label={<span className="font-bold">E Types</span>}/>
                            </Tabs>
                        </Paper>
            <SwipeableViews>
                            <TabPanel value={value} index={0}>
                                <A />
                            </TabPanel>
                            <TabPanel value={value} index={1}>
                                <B />
                            </TabPanel>
                            <TabPanel value={value} index={2}>
                                <C />
                            </TabPanel>
                            <TabPanel value={value} index={3}>
                                <D />
                            </TabPanel>
                            <TabPanel value={value} index={4}>
                                <E />
                            </TabPanel>
            </SwipeableViews>
                    </div>
                </Grid>
            </div>
        );
    }
}

 }

How do I resolve this error?

Share Improve this question edited Jan 22, 2020 at 10:13 asked Jan 22, 2020 at 9:08 cyberman123 4325 silver badges17 bronze badges

@DarrenSweeney I'm getting this error when I use Swipeable Views – cyberman123 Commented Jan 22, 2020 at 9:15
add your ponent full code.. – Prakash Karena Commented Jan 22, 2020 at 9:17
add your full page code with import export and all code ..... – Prakash Karena Commented Jan 22, 2020 at 9:41

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

Downgrade react-swipeable-views to 0.13.3,using 0.13.3 until 0.13.6 fixes all recent issues.issues

If you're facing a version issue with React, you can uninstall the original package and can install this one:

react-swipeable-views-react-18-fix (Link below)

https://www.npmjs./package/react-swipeable-views-react-18-fix

It will work!

Wrap your elements in the SwipeableViews tag.

<SwipeableViews>

 <TabPanel value={value} index={0}>
    <A />
 </TabPanel>
 <TabPanel value={value} index={1}>
    <B />
 </TabPanel>
</SwipeableViews>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - react-swipable-views shows error when used - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)