title: React Context: TypeError: Cannot read property 'areResultsVisible' of undefined
body: <p>Can someone please help me? I'm trying to pass data through context from one component to another (from Search.js to Container.js). However, I'm getting a type error. I searched many questions in Web, but haven't found an answer. Sorry, if it's childish problem, I'm new.</p>
  
  <p><strong>Search.js:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { StyledFormSearchBar } from '../styles'
  import { data } from '../data'
  
  const SearchContext = React.createContext()
  
  export default class Search extends Component {
    constructor() {
      super()
      this.state = {
        value: '',
        results: [],
        areResultsVisible: false
      }
  
      this.handleSearch = this.handleSearch.bind(this)
    }
  
    handleSearch(e) {
      this.setState = {
        value: e.target.value,
        results: data.filter(item =&gt; {
          return item.title.toLowerCase().includes(e.target.value.toLowerCase())
        }),
        areResultsVisible: true
      }
    }
  
    render() {
      return (
        &lt;StyledFormSearchBar&gt;
          &lt;input type="search" name="search" className="border border-dark rounded" onSubmit={this.handleSearch}/&gt;
          &lt;button type="submit" value="submit" className="bg-warning border-0 text-danger rounded-right position-relative"&gt;
            &lt;i className="fas fa-search"&gt;&lt;/i&gt;
          &lt;/button&gt;
  
          &lt;SearchContext.Provider value = {{
            ...this.state,
            handleSearch: this.handleSearch
          }}&gt;
            {this.props.children}
          &lt;/SearchContext.Provider&gt;
          
        &lt;/StyledFormSearchBar&gt;
      )
    }
  }
  
  const SearchContextConsumer = SearchContext.Consumer
  
  export { SearchContextConsumer }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Container.js:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { Route, Switch } from "react-router-dom"
  import { StyledDivGridContainer } from './styles'
  import { SearchContextConsumer } from './header/Search'
  
  import Carousel from './container/Carousel'
  import MobilePhonesDiscount from './container/products/carousel/MobilePhonesDiscount'
  import LaptopsDiscount from './container/products/carousel/LaptopsDiscount'
  import TabletsDiscount from './container/products/carousel/TabletsDiscount'
  import Products from './container/Products'
  import SearchResults from './container/SearchResults'
  import MobilePhones from './container/products/MobilePhones'
  import Laptops from './container/products/Laptops'
  import Tablets from './container/products/Tablets'
  import ProductPage from './container/ProductPage'
  import About from './container/About'
  import ContactUs from './container/ContactUs'
  
  export default function Container() {
    return (
      &lt;StyledDivGridContainer&gt;
        &lt;div className="no-gutters justify-content-between"&gt;
          &lt;SearchContextConsumer&gt;
            {
              value =&gt; {
                return (
                  !value.areResultsVisible 
                  ? &lt;Switch&gt;
                      &lt;Route exact path="/" component={Carousel}/&gt;
                      &lt;Route exact path="/" component={Products}/&gt;
                    &lt;/Switch&gt;                
                  : &lt;Route exact path="/" component={SearchResults}/&gt;
                )
              }
            }
          &lt;/SearchContextConsumer&gt;
          &lt;Route path="/mobile_phones_discount" component={MobilePhonesDiscount}/&gt;
          &lt;Route path="/laptops_discount" component={LaptopsDiscount}/&gt;
          &lt;Route path="/tablets_discount" component={TabletsDiscount}/&gt;
          &lt;Route path="/mobile_phones" component={MobilePhones}/&gt;
          &lt;Route path="/laptops" component={Laptops}/&gt;
          &lt;Route path="/tablets" component={Tablets}/&gt;
          &lt;Route path="/product_page" component={ProductPage}/&gt;
          &lt;Route path="/about" component={About}/&gt;
          &lt;Route path="/contact_us" component={ContactUs}/&gt;
        &lt;/div&gt;
      &lt;/StyledDivGridContainer&gt;
    )
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Search.js</strong> is in <strong>Header.js</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { StyledHeader,
           StyledSpanAccount } from './styles'
  import { Link } from "react-router-dom"
  
  import Catalogue from "./header/Catalogue"
  import Search from "./header/Search"
  
  export default class Header extends Component {
    render() {
      return (
        &lt;StyledHeader className="d-flex w-100 bg-light shadow justify-content-center"&gt;
          &lt;div className="d-flex flex-wrap justify-content-around align-items-center"&gt;
            &lt;div className="my-1 mr-3"&gt;
              &lt;Link to="/" className="logo"&gt;
                &lt;img src={require('../img/logo.webp')} alt="logo" className="img-tumbnail"/&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;Catalogue/&gt;
  
            &lt;Search/&gt;
            
            &lt;div className="d-flex my-3"&gt;
              &lt;a href="#"&gt;&lt;i className="fas fa-shopping-cart"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;i className="fas fa-user-alt ml-3"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a href="#" className="d-flex flex-nowrap"&gt;
                &lt;StyledSpanAccount className="ml-2"&gt;Log in&lt;/StyledSpanAccount&gt;
              &lt;/a&gt;
              &lt;a href="#" className="d-flex flex-nowrap"&gt;
                &lt;StyledSpanAccount className="ml-2"&gt;Sing up&lt;/StyledSpanAccount&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/StyledHeader&gt;
      )
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Container.js</strong> is in <strong>App.js</strong> near Header.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { Route } from "react-router-dom";
  import { StyledDivWrapper } from './components/styles';
  
  import Header from './components/Header';
  import Container from './components/Container';
  import Footer from './components/Footer';
  
  export default function App() {
    return (
      &lt;StyledDivWrapper className="d-flex flex-column"&gt;
        &lt;Route path="/" component={Header}/&gt;
        &lt;Route path="/" component={Container}/&gt;
        &lt;Route path="/" component={Footer}/&gt;
      &lt;/StyledDivWrapper&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/YMsru.jpg" rel="nofollow noreferrer">Error screenshot</a>
  <a href="https://i.stack.imgur.com/QcoiJ.jpg" rel="nofollow noreferrer">My folder tree</a></p>