Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

176
Views
Unhandled Runtime Error => TypeError: Cannot read properties of undefined (reading 'setState')

I ran into this Runtime error which says setState is undefined as I tried to connect to my Rinkeby test network on Metamask. I have tried binding using constructor props but that is not working. I am at loss what to do. Here's my code:

import React, { Component } from 'react'
import { Button, Form, Input, Grid, Message } from 'semantic-ui-react'
import Layout from '../../components/Layout'
import factory from '../../ethereum/factory'
import web3 from '../../ethereum/web3'
import { Router } from '../../routes'

class New extends React.Component {


constructor(props) {
super(props);
this.state = {
    minimumContribution: '',
    errorMessage: '',
    loading: false
  }
this.onSubmit = this.onSubmit.bind(this);
  }

onSubmit = async event => {
event.preventDefault()
const accounts = await web3.eth.getAccounts()
this.setState({ loading: true, errorMessage: '' })

try {
  await factory.methods.createCampaign(this.state.minimumContribution).send({
    from: accounts[0]
  });

  Router.pushRoute('/')
} catch (error) {
  this.setState({ errorMessage: error.message })
}
this.setState({ loading: false })
}

render() {
const { errorMessage, loading } = this.state
return (
  <Layout>
    <Grid centered columns={2}>
      <Grid.Column>
        <h3>Create a Campaign.</h3>
        <Form onSubmit={this.onSubmit} error={!!errorMessage}>
          <Form.Field>
            <lable>Minimum Contribution </lable>
            <Input
              label="WEI"
              labelPosition="right"
              value={this.state.minimumContribution}
              onChange={event=>this.setState({minimumContribution:event.target.value})}
            />
          </Form.Field>
          <Message error header="Oops!" content={errorMessage}/>
          <Button loading={loading} primary>Create</Button>
        </Form>
      </Grid.Column>
    </Grid>
  </Layout>
    )
   }
  }

  export default New

If it does help I am following an ethereum course on Udemy (Ethereum and Solidity: The Complete Developer's Guide). The error occurs at lecture 190.

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Looks like the 'this' context is being lost.

add a new method using arrow function

handleChange = event => this.setState({minimumContribution:event.target.value})

Refer that function in onChange

onChange={this.handleChange}
about 4 years ago · Juan Pablo Isaza Report

0

You should use async onSubmit (event) { and not onSubmit = async event => {.

The former declares a method while the latter initializes a class property with an arrow function. Arrow functions don't have their own this (and no, binding won't change that) so the surrounding scope's this will be used, which will be the global scope (the class block isn't a scope per se as it cannot contain code), and the global scope's this is undefined, and therefore, your code currently crashes on accessing this.setState.

about 4 years ago · Juan Pablo Isaza Report

0

remove this.onSubmit = this.onSubmit.bind(this); from the constructor if you want to use class properties. for more information, see How to use arrow functions (public class fields) as class methods?

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!