title: React Context and Next JS
body: <p>I'm trying to add simple React Context to my app. I create Context in "./components/DataProvider.js" that looks like this:</p>
  
  <pre><code>import React, { Component } from 'react'
  
  const DataContext = React.createContext()
  
  class DataProvider extends Component {
      state = {
          isAddButtonClicked: false
      }
  
      changeAddButtonState = () =&gt; {
          if( this.state.isAddButtonClicked ) {
              this.setState({
                  isAddButtonClicked: false
              })
          } else {
              this.setState({
                  isAddButtonClicked: true
              })            
          }
      }
  
      render() {
          return(
              &lt;DataContext.Provider
                  value={{
                      isAddButtonClicked: this.state.isAddButtonClicked,
                      changeAddButtonState: () =&gt; {
                          if( this.state.isAddButtonClicked ) {
                              this.setState({
                                  isAddButtonClicked: false
                              })
                          } else {
                              this.setState({
                                  isAddButtonClicked: true
                              })            
                          }
                      }
                  }}
              &gt;
                  {this.props.children}
              &lt;/DataContext.Provider&gt;
          )
      }
  
  }
  
  const DataConsumer = DataContext.Consumer
  
  export default DataProvider
  export { DataConsumer }
  </code></pre>
  
  <p>Which then I added to "./pages/_app.js"</p>
  
  <pre><code>import App, { Container } from 'next/app'
  
  import DataProvider from '../components/DataProvider'
  
  class MyApp extends App {
  render () {
      const { Component, pageProps } = this.props
      return (
      &lt;Container&gt;
          &lt;DataProvider&gt;
          &lt;Component {...pageProps} /&gt;
          &lt;/DataProvider&gt;
      &lt;/Container&gt;
      )
  }
  }
  
  export default MyApp
  </code></pre>
  
  <p>And consume it in "./components/AddPostButton.js".</p>
  
  <pre><code>import React, {Component} from 'react'
  import { DataConsumer } from './DataProvider'
  
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faPlus } from '@fortawesome/free-solid-svg-icons'
  
  class AddPostButton extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;DataConsumer&gt;
                      {({ changeAddButtonState }) =&gt; (
                          &lt;a onClick={changeAddButtonState}&gt;
                              &lt;FontAwesomeIcon icon={faPlus} color='#fff' /&gt;
                          &lt;/a&gt;
                      )}
                  &lt;/DataConsumer&gt;
              &lt;/div&gt;
  
          )
      }
  
  }
  
  export default AddPostButton
  </code></pre>
  
  <p>But I get this error "Cannot read property 'changeAddButtonState' of undefined". I'm using React 16.7 and NextJS 7.0.2. Don't know what is wrong. </p>
  
  <p>The second question is should I use one Context for everything or just use them as Model in MVC pattern?</p>