title: ReactJS TypeError: this.props. is not a function
body: <p>I'm building an application, where there is a form presented with different steps. In all the steps but one, I manage to provide the necessary functions as props to make some operations such as 'handleNext', 'handleBack' or 'handleChange'.</p>
  
  <p>Nevertheless, in the last step, represented in the class SuccessForm, when I try to execute the 'handleDownload' function, I get the following error:</p>
  
  <blockquote>
    <p>TypeError: this.props.handleDownload is not a function</p>
  </blockquote>
  
  <p>Here it is the SuccessForm.js class:</p>
  
  <pre><code>export class SuccessForm extends Component {
  
      constructor() {
          super();
      }
  
      download = e =&gt; {
          e.preventDefault();
          this.props.handleDownload();
      }
  
      render() {
          return (
              &lt;React.Fragment&gt;
                  &lt;Grid container&gt;
                      &lt;Grid item xs={12} sm={2}&gt;
                          &lt;DirectionsWalkIcon fontSize="large" style={{
                              fill: "orange", width: 65,
                              height: 65
                          }} /&gt;
                      &lt;/Grid&gt;
                      &lt;Grid&gt;
                          &lt;Grid item xs={12} sm={6}&gt;
                              &lt;Typography variant="h5" gutterBottom&gt;
                                  Route created
                          &lt;/Typography&gt;
                          &lt;/Grid&gt;
                          &lt;Grid item xs={12}&gt;
                              &lt;Typography variant="subtitle1"&gt;
                                  Your new track was succesfully created and saved
                          &lt;/Typography&gt;
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                      &lt;Tooltip title="Download" arrow&gt;
                          &lt;IconButton
                              variant="contained"
                              color="primary"
                              style={{
                                  marginLeft: 'auto',
                                  // marginRight: '2vh'
                              }}
                              onClick={this.download}
                          &gt;
                              &lt;GetAppIcon fontSize="large" style={{ fill: "orange" }} /&gt;
                          &lt;/IconButton&gt;
                      &lt;/Tooltip&gt;
                  &lt;/Grid&gt;
              &lt;/React.Fragment&gt;
          )
      }
  }
  </code></pre>
  
  <p>The entire NewRouteForm.js:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { makeStyles, MuiThemeProvider } from '@material-ui/core/styles';
  import Paper from '@material-ui/core/Paper';
  import Stepper from '@material-ui/core/Stepper';
  import Step from '@material-ui/core/Step';
  import StepLabel from '@material-ui/core/StepLabel';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  import DataForm from '../stepper/dataform/DataForm';
  import ReviewForm from '../stepper/reviewform/ReviewForm';
  import MapForm from '../stepper/mapform/MapForm';
  import NavBar from '../../graphic interface/NavBar';
  import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk';
  import Avatar from '@material-ui/core/Avatar';
  import CheckCircleOutlineOutlinedIcon from '@material-    ui/icons/CheckCircleOutlineOutlined';
  import FilterHdrIcon from '@material-ui/icons/FilterHdr';
  import Grid from '@material-ui/core/Grid';
  import SuccessForm from '../stepper/success/SuccessForm';
  import { withStyles } from '@material-ui/styles';
  
  
  export class NewRouteForm extends Component {
  
  state = {
      activeStep: 0,
      name: '',
      description: '',
      date: new Date(),
      photos: [],
      videos: [],
      points: []
  };
  
  handleNext = () =&gt; {
      const { activeStep } = this.state;
      this.setState({ activeStep: activeStep + 1 });
  };
  
  handleBack = () =&gt; {
      const { activeStep } = this.state;
      this.setState({ activeStep: activeStep - 1 });
  };
  
  handleChange = input =&gt; e =&gt; {
      this.setState({ [input]: e.target.value });
  }
  
  handleDateChange = date =&gt; {
      this.setState({ date: date });
  }
  
  handleMediaChange = (selectorFiles: FileList, code) =&gt; { // this is not an error, is TypeScript
      switch (code) {
          case 0: // photos
              this.setState({ photos: selectorFiles });
              break;
          case 1: // videos
              this.setState({ videos: selectorFiles });
              break;
          default:
              alert('Invalid media code!!');
              console.log(code)
              break;
      }
  }
  
  handleMapPoints = points =&gt; {
      this.setState({ points: points })
  }
  
  // ###########################
  // Download and Upload methods
  // ###########################
  
  handleDownload = () =&gt; {
      // download route
      console.log("DOWNLOAD")
      alert("DOWNLOAD");
  }
  
  upload = () =&gt; {
      // upload route
  }
  
  render() {
  
      const { activeStep } = this.state;
      const { name, description, date, photos, videos, points } = this.state;
      const values = { activeStep, name, description, date, photos, videos, points };
  
      const { classes } = this.props;
  
      return (
          &lt;MuiThemeProvider&gt;
              &lt;React.Fragment&gt;
                  &lt;NavBar /&gt;
                  &lt;main className={classes.layout}&gt;
                      &lt;Paper className={classes.paper}&gt;
                          &lt;Avatar className={classes.avatar}&gt;
                              &lt;FilterHdrIcon fontSize="large" /&gt;
                          &lt;/Avatar&gt;
  
                          &lt;Typography component="h1" variant="h4" align="center"&gt;
                              Create your own route
                          &lt;/Typography&gt;
  
                          &lt;Stepper activeStep={activeStep} className={classes.stepper}&gt;
                              {steps.map((label) =&gt; (
                                  &lt;Step key={label}&gt;
                                      &lt;StepLabel&gt;{label}&lt;/StepLabel&gt;
                                  &lt;/Step&gt;
                              ))}
                          &lt;/Stepper&gt;
  
                          &lt;React.Fragment&gt;
                              {activeStep === steps.length ? (
                                  &lt;SuccessForm /&gt;
                              ) : (
                                      &lt;React.Fragment&gt;
                                          {getStepContent(activeStep,
                                              values,
                                              this.handleNext,
                                              this.handleBack,
                                              this.handleChange,
                                              this.handleDateChange,
                                              this.handleMediaChange,
                                              this.handleMapPoints,
                                              this.handleDownload
                                          )}
  
                                      &lt;/React.Fragment&gt;
                                  )}
                          &lt;/React.Fragment&gt;
                      &lt;/Paper&gt;
                  &lt;/main&gt;
              &lt;/React.Fragment&gt;
          &lt;/MuiThemeProvider&gt;
      )
  }
  }
  
  const steps = ['Basic data', 'Map', 'Review your route'];
  
  function getStepContent(step, 
                      values, 
                      handleNext, 
                      handleBack, 
                      handleChange, 
                      handleDateChange, 
                      handleMediaChange, 
                      handleMapPoints, 
                      handleDownload) {
  switch (step) {
      case 0:
          return &lt;DataForm
              handleNext={handleNext}
              handleChange={handleChange}
              handleDateChange={handleDateChange}
              handleMediaChange={handleMediaChange}
              values={values}
          /&gt;;
      case 1:
          return &lt;MapForm
              handleNext={handleNext}
              handleBack={handleBack}
              handleMapPoints={handleMapPoints}
              values={values}
          /&gt;;
      case 2:
          return &lt;ReviewForm
              handleNext={handleNext}
              handleBack={handleBack}
              values={values}
          /&gt;;
      case 3:
          return &lt;SuccessForm
              handleDownload={handleDownload}
          /&gt;;
      default:
          throw new Error('Unknown step');
  }
  }
  
  const useStyles = theme =&gt; ({
  layout: {
      width: 'auto',
      marginLeft: theme.spacing(2),
      marginRight: theme.spacing(2),
      [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
          width: 600,
          marginLeft: 'auto',
          marginRight: 'auto',
      },
  },
  paper: {
      marginTop: theme.spacing(3),
      marginBottom: theme.spacing(3),
      padding: theme.spacing(2),
      [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
          marginTop: theme.spacing(6),
          marginBottom: theme.spacing(6),
          padding: theme.spacing(3),
      },
  },
  stepper: {
      padding: theme.spacing(3, 0, 5),
  },
  buttons: {
      display: 'flex',
      justifyContent: 'flex-end',
  },
  button: {
      marginTop: theme.spacing(3),
      marginLeft: theme.spacing(1),
  },
  avatar: {
      marginLeft: 'auto',
      marginRight: 'auto',
      backgroundColor: theme.palette.warning.main,
  },
  icon: {
      width: 65,
      height: 65,
  },
  grid: {
      marginLeft: theme.spacing(2),
  }
  });
  
  export default withStyles(useStyles)(NewRouteForm);
  </code></pre>