React JS: Cannot read property

Question

I'm learning React; I have a such problem. When I call function "handleSearch" it crashes with TypeError: Cannot read property 'CONTACTS' of undefined on console.log(this.CONTACTS);

I define CONTACTS in constructior. And call method handleSearch() in onChange of input. Then the error occurs. But everything is ok with this.CONTACTS.map()

import React, { Component } from 'react';
import Contact from './Contact';
import './Contacts.css';


    class ContactList extends Component {

      constructor() {
        super();

        this.CONTACTS = [
          {
            id: 1,
            name: 'Alex',
            phone: '777',
            image: 'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'
          }, 
          {
            id: 2,
            name: 'Ann',
            phone: '888',
            image: 'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'        
          },
          {
            id: 3,
            name: 'Zel',
            phone: '999',
            image: 'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'        
          }
        ];

        this.state = {
          displayedContacts: this.CONTACTS
        };
      }

      handleSearch(event) {
        var query = event.target.value.toLowerCase();

        console.log(this.CONTACTS);
      } 

      render() {
        return (
          <div className="contacts">
            <input type="text" className="search-field" onChange={ this.handleSearch }/>

            <ul className="contacts-list">
              {
                this.CONTACTS.map(function(el) {
                  return <Contact 
                    key={el.id} 
                    name={el.name}
                    phone={el.phone}
                    image={el.image} /> 
                })
              }
            </ul>
          </div>
        );
      }
    }

    export default ContactList;

Answer 1

You have to use bind in the constructor. In your event handler this refers to the DOM node. Please add this line to the constructor:
this.handleSearch = this.handleSearch.bind(this)