CODEWITHSUNDEEP
reactjs
Bhavesh Barskar
Bhavesh Barskar

Reputation: 13

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

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>
      );
    }
}

Upvotes: 1

Views: 13083

Answers (2)

Dante
Dante

Reputation: 1

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)
};

Upvotes: 0

Dils Matchanov
Dils Matchanov

Reputation: 577

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. :)

Upvotes: 2

Related Questions