Reactjs : TypeError: Cannot read property 'value' of undefined

Question

I am new to Reactjs and trying to change the of value text which is entered by user in textbox, after button click event. But after button click event I am getting error "TypeError: Cannot read property 'value' of undefined" at handleChange(e) function.Can anyone please help me with whats going wrong here??

Here is the component I am working with :

 Constructor(props){
    super();
    this.state={
             typedtext: 'Nothing'
           }
      };

    handleClick(){
              this.handleChange(this.state.typedtext)
             }

    handleChange(e){
            this.setState({ typedtext: e.target.value });  
              }

    render(){

     return(

        <div>
         <label> Typed Value is : {this.state.typedtext} </label> <p> 
         </p>

        <label> Type Something here </label>
          <input type='text'onChange={(e)=>this.handleChange(e)} 
               value=  {this.state.typedtext}/>

       <button onClick={()=>this.handleClick()}> Copy Text </button>
       </div>
      );
    }
}

I am not sure but constructor method should start from lower case c — Dils Matchanov
– Dils Matchanov, Commented Jan 7, 2019 at 17:28
@DilsMatchanov, I think it's just code copy/paste issue. Also it should be super(props), not super() — Valerii
– Valerii, Commented Jan 7, 2019 at 17:33
@DilsMatchanov yes constructor is starting with lower case only, but still the code is not working its giving the same error when I click on Button. — Bhavesh Barskar
– Bhavesh Barskar, Commented Jan 8, 2019 at 19:31

Dils Matchanov · Accepted Answer · 2019-01-10 17:27:36Z

The problem appears because when you run handleChange in handleClick method you use the value of your state as the argument instead of event object. It is trying to get value property of string.

Your code should look like this:

constructor(props) {
  super(props);
  this.state = {
    typedtext: 'Nothing'
  }
};

handleClick(e) {
  this.handleChange(e)
}

handleChange(e) {
  this.setState({
    typedtext: e.target.value
  });
}

render() {

  return (
    <div>
      <label> Typed Value is : {this.state.typedtext} </label> 
      <p></p>

      <label> Type Something here </label>
      <input type='text'onChange={e => this.handleChange(e)} value={this.state.typedtext}/>

      <button onClick={e => this.handleClick(e)}> Copy Text </button>
    </div>
  );
}

But handleClick will not copy the text. It will just remove it because handleChange will try to get the value of button that doesn't contain any value.

Working code looks like this:

constructor(props) {
  super(props);
  this.state = {
    typedtext: 'Nothing'
  }
};

handleChange() {
  this.setState({
    typedtext: this.input.value
  });
}

render() {

  return (
    <div>
      <label> Typed Value is : {this.state.typedtext} </label> 
      <p></p>

      <label> Type Something here </label>
      <input type='text'onChange={() => this.handleChange()} value={this.state.typedtext} ref={input => this.input = input}/>

      <button onClick={() => this.handleChange()}> Copy Text </button>
    </div>
  );
}

But you will not be able to see what the button does because while you are typing it already copies the text. :)

Dante · Accepted Answer · 2020-07-29 03:49:28Z

0

Try to add a bind to "this" refering this method on contructor:

this.handleChange = this.handleChange.bind(this)

The entire code on constructor:

constructor(props){
    super();
    this.state={
        typedtext: 'Nothing'
    }
    this.handleChange = this.handleChange.bind(this)
};

answered Jul 29, 2020 at 3:49

Dante

12 bronze badges

Collectives™ on Stack Overflow

Reactjs : TypeError: Cannot read property 'value' of undefined

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related