Estoy ejecutando una aplicación next.js, con un archivo "temp.js" en el directorio /pages. Mi código (temp.js) es el siguiente:

 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 (usando button en lugar de MUI Button , pero eso no importa):

 <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>

Esto da el siguiente 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(){

Esta función funcionaría bien si no se requiriera 'someValue'. Necesitas ayuda. Por favor, pregunte por cualquier aclaración.