React Class Component setState undefined

Question

I am attempting to update a variable from "" to a string of text with an onClick method in React. I've approached this several different ways following examples on the web and Youtube but all are resulting in various error messages.

This is the latest attempt and I'm receiving an error message that it cannot set properties of undefined setting set state & it' pointing to the line that reads "super(props).

Can you please let me know what is wrong with this approach?

import React,{Component} from "react";

//Declaring variable globally as I was receiving error messages previously
let response = "";

class Track extends Component{
        constructor(props) {
        super(props)

        //Setting the initial state
        this.state = {
         response: "",
          
        };
    }
    
    //Not sure why I'm adding this as some tutorials did not have this but nothing else was working and I came across one with this so I'm attempting it.
    componentDidMount(){
        response = "";
    }
//This function takes the variable from "" and updates it to the string below
    autoResponse(){
    this.setState=({response : "This is not a valid tracking #"})
 }
     
    render(){  
     
    return(<>
   
<input placeholder="Enter Tracking #"></input>

<button onClick={this.autoResponse}>TRACK</button> {/*This is for the setState function. I tried preventDefault() but it stated it's not defined*/}
<div className="response-cntr">
    <p className="response-text">{this.state.response}</p> {/*Should display the updated variable after the onClick*/}
</div>


        </>)
    }

}

export default Track;

I would highly recommend using react functional components, especially if you're new to react. Functional components are in the process of replacing class components. — rjumatov
– rjumatov, Commented Jul 9, 2022 at 17:17

Gabriele Petrioli · Accepted Answer · 2022-07-09 17:21:50Z

You do not need the global variable response.
No need for the componentDidMount either, you already set the initial state in the constructor.
setState is a function, so you need to call it and not assign something to it
use an arrow function for the autoResponse, if you intend to pass it as a prop to other components, so that it retains the correct this.

import React, {
  Component
} from "react";

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

    //Setting the initial state
    this.state = {
      response: ""
    };
  }

  autoResponse = () => {
    this.setState({
      response: "This is not a valid tracking #"
    });
  }

  render() {
    return (<>
      <input placeholder="Enter Tracking #"></input>
      <button onClick={this.autoResponse}>TRACK</button>
      <div className="response-cntr">
        <p className="response-text">{this.state.response}</p>
      </div>
     </>);
    }
  }

  export default Track;

Sujith Sandeep · Accepted Answer · 2022-07-09 17:19:36Z

0

You just need to remove = after setState. Try like below,

 autoResponse(){
    this.setState({response : "This is not a valid tracking #"})
 }

answered Jul 9, 2022 at 17:19

Sujith Sandeep

1,24710 silver badges21 bronze badges

Comments

Siddharth Seth · Accepted Answer · 2022-07-09 17:21:30Z

Please try the below, it has the update that the component class extends React.Component, also a few other obvious fixes. BTW like mentioned by other users, when starting off with React it would be a lot easier to get going with function components, rather than jumping right into Class ones...The learning curve would be much less steeper...

import React from "react";

class Track extends React.Component{
        constructor(props) {
        super(props)

        //Setting the initial state
        this.state = {
         response: "",
          
        };
    }

    autoResponse(){
        this.setState({response : "This is not a valid tracking #"})
    }
     
    render(){  
     
    return(<>
   
<input placeholder="Enter Tracking #"></input>

<button onClick={this.autoResponse}>TRACK</button> {/*This is for the setState function. I tried preventDefault() but it stated it's not defined*/}
<div className="response-cntr">
    <p className="response-text">{this.state.response}</p> {/*Should display the updated variable after the onClick*/}
</div>


        </>)
    }

}

export default Track;

Dev Garg · Accepted Answer · 2022-07-09 17:25:15Z

0

You are Writing this.setState = ({}) which is wrong instead write this.setState({}) bcz set State is a Function just remove that =

edited Jul 9, 2022 at 17:25

answered Jul 9, 2022 at 17:24

Dev Garg

114 bronze badges

Collectives™ on Stack Overflow

React Class Component setState undefined

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related