-1

I am running a next.js app, with a file "temp.js" in the /pages directory. My code (temp.js) is as follows:

import React from 'react';
import {Button} from '@mui/material';

class SomeClass extends React.Component{
    state={
        someState: false
    }
    handleClick = async(someValue) => {
        this.setState({ someState: true });
        // await someAsyncFunction(someValue);
        console.log(someValue);
    }
    render(){
        return(
            <Button onClick={()=>this.handleClick(12)}>
                Click me.!
            </Button>
        )
    }
}

export default SomeClass;

Stack Snippet (using button instead of MUI Button, but that doesn't matter):

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

<script type="text/babel" data-presets="es2017,react,stage-3">
class SomeClass extends React.Component{
    state={
        someState: false
    }
    handleClick = async(someValue) => {
        this.setState({ someState: true });
        // await someAsyncFunction(someValue);
        console.log(someValue);
    }
    render(){
        return(
            <button onClick={()=>this.handleClick(12)}>
                Click me.!
            </button>
        )
    }
}

ReactDOM.render(<SomeClass />, document.getElementById("root"));
</script>
<script src="https://unpkg.com/regenerator-runtime@0.13.2/runtime.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.10.3/babel.min.js"></script>

This gives the following error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'setState')

   7 | }
   8 | handleClick = async(someValue) => {
>  9 |     this.setState({ someState: true });
     |         ^
  10 |     console.log(someValue);
  11 | }
  12 | render(){

This function would work fine if the 'someValue' was not required. Need help. Please ask for any clarifications.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Konark Verma
  • 52
  • 1
  • 5
  • 4
    *"This gives the following error:"* ***What*** error? All you've shown is something pointing to a `.`. Other than not handling rejections (see below), that code looks like it should run. – T.J. Crowder Jan 31 '22 at 09:34
  • 1
    Side note: If you're calling an `async` function from a non-`async` function, always be sure to handle promise rejections. Otherwise, they won't be handled by anything. – T.J. Crowder Jan 31 '22 at 09:35
  • sorry, just updated with the error. – Konark Verma Jan 31 '22 at 09:38
  • 2
    Thank you for updating the question with the error, but the code shown in the question will definitely not produce that error. `handleClick` is an arrow function in a context where it will close over `this` correctly, so `this` will not be undefined. The code you're running that has this error must be different from the above. Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). – T.J. Crowder Jan 31 '22 at 09:40
  • I also tried using onClick={async()=>{await this.handleClick(12)}}, but was getting same error. – Konark Verma Jan 31 '22 at 09:41
  • 1
    If calling `handleClick` throws an error then adding logic that deals with the return value of `handleClick` isn't going to help. – Quentin Jan 31 '22 at 09:42
  • (Blast, it'll be hard to create a Stack Snippet for this, because of [this long-standing problem](https://meta.stackoverflow.com/questions/386096/update-the-version-of-babel-standalone-and-others-used-by-stack-snippets) with Stack Snippets. Damnit Stack Exchange! Fix the darned things!) – T.J. Crowder Jan 31 '22 at 09:42
  • Can you create a [mcve] on [CodeSandbox](https://codesandbox.io/) instead? That is because like what @T.J.Crowder pointed out, it is not possible to reproduce your bug in a stack snippet and we need to see what could've gone wrong: the way the code is written in your question now _should_ work. – Terry Jan 31 '22 at 09:44
  • 2
    @KonarkVerma - I've copied your code into a Stack Snippet (using `button` instead of MUI's `Button`, which is not going to affect what you've described). As you can see, it works just fine. Please edit the code in the `script type="text/babel"` tag in the snippet with your real code causing the error. – T.J. Crowder Jan 31 '22 at 09:45
  • Currently I am using a next.js app and the code is exactly the same. I have created a file named temp.js in the /pages directory and pasted this code in the file. I am still getting the same error. – Konark Verma Jan 31 '22 at 10:00
  • @T.J.Crowder can you please take a look? – Konark Verma Jan 31 '22 at 10:15
  • @Terry can you please take a look? – Konark Verma Jan 31 '22 at 10:16
  • There isn't much we could do since we are unable to reproduce the issue. – Terry Jan 31 '22 at 10:18
  • @T.J.Crowder Sorry, that was not my intention. I can't appreciate enough the help by the work that you are doing. I just updated the situation, and pasted the entire code again. Sorry again. – Konark Verma Jan 31 '22 at 10:23
  • Codesandbox has a Nextjs template you can start from. Or if your project is hosted in a github repo you can directly import it into a sandbox. – Drew Reese Feb 01 '22 at 07:54
  • Does this answer your question? [React - uncaught TypeError: Cannot read property 'setState' of undefined](https://stackoverflow.com/questions/32317154/react-uncaught-typeerror-cannot-read-property-setstate-of-undefined) – Elikill58 May 22 '23 at 06:35

1 Answers1

1

Have you tried deleting your node-modules, and doing an npm i again? It works for me sometimes.

Vijay
  • 34
  • 4