TypeError: Cannot read property 'handleSubmit' of undefined

Question

I'm using material ui for designing UI framework

     function handleSubmit(){
                alert("success");
            }
            function SignIn(props) {
            const { classes } = props;
            handleSubmit();
            return (<form className={classes.form} onSubmit={this.handleSubmit()}>
                  <FormControl margin="normal" required fullWidth>
                  <InputLabel htmlFor="email">Email Address</InputLabel>
                  <Input id="email" name="email" autoComplete="email" autoFocus />
                  </FormControl>
</form>

Error Stack

                    60 | <Typography component="h1" variant="h5">
                61 |   Sign in
                62 | </Typography>
                > 63 | <form className={classes.form} onSubmit={this.handleSubmit()}>
                    | ^  64 |   <FormControl margin="normal" required fullWidth>
                65 |     <InputLabel htmlFor="email">Email Address</InputLabel>
                66 |     <Input id="email" name="email" autoComplete="email" autoFocus />

Can anyone lemme know where m going wrong? `

The problem might be in the backtick in the "return (`
" line. Can you try removing that and seeing if it works then? Also, you're referring to "this.handleSubmit", which doesn't exist in functional component. — Saša Tomislav Mataić, Dec 04 '18 at 14:53
nope i.e., its a typo theirs nothing such my bad as tactics . actually i'm not sure of how to call it in functional component — Tested, Dec 04 '18 at 14:56
See my answer below. You can't have handlers in a functional component, you need to refactor it to a class component. Check out the answer — Saša Tomislav Mataić, Dec 04 '18 at 15:07

score 1 · Accepted Answer · answered Dec 04 '18 at 15:05

You have a few issues here:

You're calling handleSubmit() inside a functional component. That should only be called by your form
The handler function shouldn't be called in onSubmit. Use onSubmit={this.handleSubmit} instead of onSubmit={this.handleSubmit()}.
When using functional components (instead of a class), there's no this object, so no this.props either.

If using handling functions, then you should use a class. See the example below.

class SignIn extends Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = function(){
     alert("success");
  }

  render() {
    const { classes } = this.props;

    return (<form className={classes.form} onSubmit={this.handleSubmit}>
      <FormControl margin="normal" required fullWidth>
        <InputLabel htmlFor="email">Email Address</InputLabel>
        <Input id="email" name="email" autoComplete="email" autoFocus />
      </FormControl>
     </form>);
  }
}

score 0 · Answer 2 · answered Dec 04 '18 at 15:00

0

You can try with -

onSubmit={()=> this.handleSubmit()}

I think the problem is definitely going to be a Lexical scoping in Javascript

answered Dec 04 '18 at 15:00

Manoz

6,507
13
68
114

actually the error disappered but when i click on singin the handlesubimt error doesnt render – Tested Dec 04 '18 at 15:06

TypeError: Cannot read property 'handleSubmit' of undefined

2 Answers2