title: React Context API / Bind function in context file?
body: <p>I am trying to use the context api. I'm getting an error TypeError: 'this.props.fetchWeather is not a function' when I submit the form. </p>
  
  <p>My WeatherContext file has a WeatherProvider &amp; WeatherConsumer. My state and a fetchWeather function are this file. When I log what is being passed to the value fetchWeather logs as undefined. </p>
  
  <pre><code>{term: "", forecast: Array(0), fetchWeather: undefined}
  </code></pre>
  
  <p>My question is how do I define the fetchWeather function within the WeatherContext? I tried binding it. I'm not sure where I'm going wrong. </p>
  
  <p>This question has been updated to reflect changes I made ...</p>
  
  <p>src/index.js</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './App'
  
  import { WeatherProvider, WeatherContext } from 
  './context/WeatherContext'
  
  ReactDOM.render(
       &lt;WeatherProvider&gt;
          &lt;WeatherContext.Consumer&gt;
              {({ term, forecast, fetchWeather }) =&gt; 
                   &lt;App term={ term } 
                        forecast={ forecast } 
                        fetchWeather={ fetchWeather }  /&gt;
              }
          &lt;/WeatherContext.Consumer&gt;
       &lt;/WeatherProvider&gt;, 
       document.getElementById('root')
  );
  registerServiceWorker();
  </code></pre>
  
  <p>src/app.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import SearchForm from './components/Search/Search_Form'
  
  export default class App extends React.Component {
      render() {
          return (
            &lt;div className="App"&gt;
              &lt;SearchForm {...this.props}/&gt;
            &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>src/context/WeatherContext</p>
  
  <pre><code>import React, { Component } from 'react'
  import axios from 'axios'
  import _ from 'lodash'
  
  export const WeatherContext = React.createContext();
  
  export class WeatherProvider extends React.Component {
  
      state = {
          context: {
              input: '',
              forecast: [],
              fetchWeather: this.fetchWeather
          }
      }
  
       fetchWeather = (term) =&gt; {
          let QUERY = term
          const KEY = `key`
          let URL = `http://url.com/q=${QUERY}&amp;appid=${KEY}`
  
          axios.get(URL)
          .then( res =&gt; {
            // do something ...
          })
      }
  
      render() {
          return (
              &lt;WeatherContext.Provider 
              value={{ ...this.state.context }} &gt;
                  { this.props.children }
              &lt;/WeatherContext.Provider&gt;
          )
      }
  }
  </code></pre>
  
  <p>src/components/Search/index</p>
  
  <pre><code>import React from 'react'
  import { WeatherContext } from '../../context/WeatherContext'
  import SearchForm from './Search_Form'
  
  export default (props) =&gt; (
      &lt;WeatherContext.Consumer&gt;
          {
              ({fetchWeather}) =&gt; 
              &lt;SearchForm {...props} fetchWeather={fetchWeather} /&gt;
          }
      &lt;/WeatherContext.Consumer&gt;
  )
  </code></pre>
  
  <p>src/components/Search/Search_Form</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class SearchForm extends Component {
      handleFormSubmit = (e) =&gt; {
          e.preventDefault();
          let term = this.input.value
          this.props.fetchWeather(term)
      }
  
      handleClear =(e) =&gt; {
          e.preventDefault();
          this.setState({
              input: ''
          }) 
      }
  
      render() {
          console.log(this.props);
          return (
           &lt;div&gt;
               &lt;form className="form" onSubmit={ this.handleFormSubmit }&gt;
                  &lt;input type='text'
                      placeholder='Enter a US City'
                      ref={input =&gt; { this.input = input }}/&gt;
                  &lt;button type="submit"&gt; Search &lt;/button&gt;        
                  &lt;button onClick={ this.handleClear }&gt; x &lt;/button&gt;
               &lt;/form&gt;
           &lt;/div&gt;
  
          )
       }
  }
  
  
   export default SearchForm;
  </code></pre>