Error using ref in Functional Component TypeError: flipPage.gotoNextPage is not a function

webface commented 4 years ago

I'm using nextjs and material ui. When I try to useRef I get an error

TypeError: flipPage.gotoNextPage is not a function

Here is my code

import React, { useRef } from 'react'
import Layout from '../components/Layout';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import FlipPage from 'react-flip-page';
import IconButton from '@material-ui/core/IconButton';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';

const styles = ({
  breakpoints,
  transitions
}) => ({
  root: {
    padding: 16,
    transition: transitions.create(),
    [breakpoints.up('sm')]: {
      padding: 24,
      maxWidth: 700,
      margin: 'auto'
    },
    [breakpoints.up('md')]: {
      maxWidth: 960
    }
  },
  paper:{
    padding:16,
  },
  margin:{
    margin: 5
  },
  flexBetween:{
    display:'flex',
    justifyContent: 'space-between'
  }
});
const Experience=({classes}) =>{
  let flipPage = useRef(null);
  return (
    <Layout>
      <div className={classes.root}>
        <Typography variant="overline" gutterBottom>
          21 Years
        </Typography>
        <div className={classes.flexBetween}> 
        <Typography variant="h4" gutterBottom>
          Experience 
        </Typography>
        <span>
          <IconButton aria-label="prev" className={classes.margin} size="small" onClick={flipPage.gotoNextPage()}>
            <ArrowBackIcon fontSize="inherit" />
          </IconButton>
          <IconButton aria-label="next" className={classes.margin} size="small" onClick={flipPage.gotoNextPage()}>
            <ArrowForwardIcon fontSize="inherit" />
          </IconButton>
        </span>
        </div>
        <FlipPage orientation='horizontal' 
        width={{sm:'320',md:'640'}} 
        showHint={true} 
        showSwipeHint={true} 
        showTouchHint={true}
        ref={(component) => { flipPage = component; }}>

          <Paper className={classes.paper} elevation={0}>
          <Grid container  spacing={2}>
            <Grid item xs={6}>
              <Typography variant="h5" gutterBottom>
                Corus Entertainment 
              </Typography>
                <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Typography>
            </Grid>
            <Grid item xs={6}>
              <Typography variant="h6" gutterBottom>
                Agile Full Stack Developer 
              </Typography>
                <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Typography>
              </Grid>
              </Grid>
          </Paper>

          <Paper className={classes.paper} elevation={0}>
          <Grid container  spacing={2}>
            <Grid item xs={6}>
              <Typography variant="h5" gutterBottom>
                Target Directories 
              </Typography>
                <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Typography>
            </Grid>
            <Grid item xs={6}>
              <Typography variant="h6" gutterBottom>
                Full Stack Wordpress Developer 
              </Typography>
                <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Typography>
              </Grid>
              </Grid>
          </Paper>

          <Paper className={classes.paper} elevation={0}>
          <Grid container  spacing={2}>
            <Grid item xs={6}>
              <Typography variant="h5" gutterBottom>
                Learn 2 
              </Typography>
                <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Typography>
            </Grid>
            <Grid item xs={6}>
              <Typography variant="h6" gutterBottom>
                Wordpress Developer 
              </Typography>
                <Typography>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </Typography>
              </Grid>
              </Grid>
          </Paper>

        </FlipPage>
      </div>
    </Layout>
  );
}

export default withStyles(styles)(Experience);

webface commented 4 years ago

SOLVED

let flipPage = useRef(null);
  const next =()=>{flipPage.gotoNextPage()}
  const prev =()=>{flipPage.gotoPreviousPage()}
.....
<span>
          <IconButton aria-label="prev" className={classes.margin} size="small" onClick={prev}>
            <ArrowBackIcon fontSize="inherit" />
          </IconButton>
          <IconButton aria-label="next" className={classes.margin} size="small" onClick={next}>
            <ArrowForwardIcon fontSize="inherit" />
          </IconButton>
        </span>

darenju commented 4 years ago

I'm glad you could figure this out! In case you were wondering what happened:

In your first version, your onClick handler was called immediately, and the ref was still null.
In your solution, you created anonymous functions that are called onClick. Except this is called after the ref was set. Therefore you could also have written:

<IconButton aria-label="prev" className={classes.margin} size="small" onClick={() => flipPage.gotoNextPage()}>
  <ArrowBackIcon fontSize="inherit" />
</IconButton>

darenju / react-flip-page

Error using ref in Functional Component TypeError: flipPage.gotoNextPage is not a function #124