Getting error of "Cannot read props of undefined" when being passed to child component for onChange method

Question

I'm getting an error of "Cannot read props of undefined" when passing an onchange function to a child component, however, when console logging the props, the correct properties show up.

I did this previously where I passed an onClick prop to a child button, and that seems to have worked fine.

The error message only happens when attempting to edit the field.

Console logged props

Parent component

//Parent component
  onChange = e => {
    e.preventDefault();
    console.log(e);
  }

  render(){
    return(
      <div className="App">
        <div className="cardRow">             
              <Card question={this.state.currentCard.question} 
                    answer={this.state.currentCard.answer} 
                    source={this.state.currentCard.source}
                    onClick={this.submitUpdate.bind(this)}
                    recordChange={this.onChange.bind(this)}>{this.state.update}</Card>  
                .....
                
  //child component
  class Card extends Component {
    
    //the below code is where the error message is pointing
    recordChange(){
        this.props.recordChange();
    }

    onSubmit(){
        this.props.onSubmit();
    }

    render(props){
        console.log(this.props);
        return(
            <div className="card-container">
                    {this.props.children? 
                        <div className="cardUpdate"> 
                            <form className="update-form">
                                <h5>Front</h5>
                                    <input  type="text"
                                            value={this.props.question}
                                            onChange={this.recordChange}/>
                                <h5>Answer</h5>
                                <textarea  type="text"
                                            value={this.props.answer}
                                            onChange={this.recordChange}/>
                                <h5>Source</h5>
                                <input  type="text"
                                            value={this.props.source}
                                            onChange={this.recordChange}/>
                                <div>
                                    <button onClick={this.props.onClick}>Submit</button>    
                                </div>
                            </form>
                        </div>        
                        :
                            <div className="card">
                                <div className="front">
                                    <div className="question">{this.props.question}</div>
                                </div>
                                <div className="back">
                                    <div className="answer">{this.props.answer}</div>
                                    <div className="source">{this.props.source}</div>
                                </div>
                            </div>
                    }      
            </div>
        );
    }

Does this answer your question? [React: "this" is undefined inside a component function](https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function) — Emile Bergeron, Mar 02 '20 at 18:41

Brian Thompson · Accepted Answer · 2020-03-02T17:17:29.887

recordChange does not have access to this as being in the context of the class.

recordChange() {
  // 'this' is undefined.
  this.props.recordChange();
}

However, as you noticed, console.log(this.props); inside render works fine. This is because render is called within the context of the class; whereas recordChange is not.

Change it to an arrow function so that this is in scope:

recordChange = () => {
  this.props.recordChange();
}

Or bind it to this in the constructor:

constructor(props) {
  super(props);
  this.recordChange = this.recordChange.bind(this);
}

recordChange(){
  this.props.recordChange();
}

Or better yet:

Don't use the child function at all. If all it does is call the function from props it is unnecessary. Just do onChange={this.props.recordChange}

Thanks a bunch! this worked. I ended up going with the last portion and passing the props directly to the onChange prop. — John Shen, Mar 03 '20 at 00:32

Getting error of "Cannot read props of undefined" when being passed to child component for onChange method

1 Answers1