What is the Cannot read property of undefined error?

Question

React

There is such a code. In general, I take it from a slightly outdated tutorial. I am rewriting to es6 along the way, perhaps this is the problem. React throws an error at the line if (this.props.notes.length !== this.prevProps.notes.length )
"Cannot read property 'notes' of undefined". What am I writing wrong?

class NotesGrid extends Component {
    constructor(props) {
        super(props);
    }
    
     componentDidMount () {
    let grid= this.refs.grid;
    let msnry = new Masonry( grid, {
      itemSelector: '.note',
      columnWidth: 200,
      gutter: 10
    });
    }
    
    componentDidUpdate (prevProps) {
        if (this.props.notes.length !== this.prevProps.notes.length ) {
            this.msnry.reloadItems();
            this.msnry.layout();
        }
        
    }
    
    render() {
    return(
    <div className="notes-grid" ref="grid">
            {this.props.notes.map(note => {
             return (
                <Note 
                key={note.id} 
                color={note.color}> 
                {note.text} 
                </Note>);   
            })
            }
    </div>
    )
 }
}

export default class NotesApp extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            notes: [
    {
        id: 1,
        text: 'Один, два и три - это целые числа, как и минус четыре. Если считать в верхнюю или нижнюю сторону, можно встретить еще очень и очень много целых чисел.',
        color: '#ff8a80'
    },
    
    {
        id: 2,
        text: 'Как бы то ни было, вы никогда не доберетесь до того, что называется «положительной бесконечностью» или «отрицательной бесконечностью» - поэтому целыми числами они не являются.',
        color:'#B388FF'
    }
]
        }
        
        this.handleNoteAdd=this.handleNoteAdd.bind(this);
    }
    
    handleNoteAdd (newNote) {
        let newNotes = this.state.notes.slice();
        newNotes.unshift(newNote)
        this.setState ({
            notes: newNotes
        }) 
    }
    
    render() {
    return(
    <div className="notes-app" style={{textAlign: "center"}}>
    NotesApp
    <NoteEditor onNoteAdd={this.handleNoteAdd}/>
    <NotesGrid notes = {this.state.notes}/>
    </div>
    )
  }
}

Answer 1

The component does not have a this.prevProps. prevPropscomes to the function as an argument.