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

322
Views
NextJS application, stuck on can not read property of undefined (reading setState) within a method

I have bound the method to this within the constructor. I have also used the arrow function trick to try and get this to work properly. However, I keep getting this error:

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

Source
components\home\cta\cta.js (14:9) @ _callee$

  12 | submitSubscriber = async (e, stateEmail) => {
  13 |   e.preventDefault()
> 14 |   this.setState({loading: true})
     |       ^
  15 |   const res = await fetch('http://localhost:5000/subscribe/add', {
  16 |     method: 'POST',
  17 |     body: JSON.stringify({ email: stateEmail }),

My code for this component is below:

import React, { Component } from 'react';
import ctastyle from '/styles/home/cta.module.css'

export default class CTA extends Component {
  constructor(props) {
    super(props)
    this.state = { email: '', response: '', loading: false }

    this.submitSubscriber = this.submitSubscriber.bind(this)
  }

  submitSubscriber = async (e, stateEmail) => {
    e.preventDefault()
    this.setState({loading: true})
    const res = await fetch('http://localhost:5000/subscribe/add', {
      method: 'POST',
      body: JSON.stringify({ email: stateEmail }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    const data = await res.json()
    this.setState({loading: false})
    this.setState({email: '', response: data.response[0]})
  }

  renderMessage(mess) {
    if (mess == 200) {
      return (
        <div className={ctastyle.successMessage}>
          <h3>Successfully Signed Up!</h3>
        </div>
      )
    }
    else if (mess == 400) {
      <div className={ctastyle.errorMessage}>
        <h3>Looks like that email has signed up already!</h3>
      </div>
    }
  }

  render() {
    return (
      <div className={ctastyle.ctaHousing}>
        {this.renderMessage(this.state.response)}
        <h2>SUBSCRIBE TO OUR MAILING LIST</h2>
        <h4>Get our newsletters and new content!</h4>
        <form>
          <input placeholder='youremail@email.com' value={this.state.email} onChange={e => this.setState({ email: e.target.value })} />
          <button onClick={e => this.submitSubscriber(e, this.state.email)}>Sign Up</button>
        </form>
      </div>
    )
  }
}

I know someone has run into this before, if anyone has any questions or answers please let me know!

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

0

I think your issue may lie with using async in this context as you do on line 12. I believe It should be called as async submitSubscriber(args) {code} rather than the way you have done it.

Source: https://www.valentinog.com/blog/await-react/

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!