title: React Context: TypeError: render is not a function
body: <p>I'm trying to use React Context to pass a function to a nested child component, which effectively allows the child to update the parents state when pressed.</p>
  
  <p>The problem is I seem to be getting an error <strong>'TypeError: render is not a function. (In render(newValue), render is an instance of Array'</strong> and an error in my console reads: <strong>'Warning: A context consumer was rendered with multiple children, or a child that isn't a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it.'</strong></p>
  
  <p>I've looked around at this error and also at documentation but no answers seem to answer my question, I can't quite work out why this isn't working.</p>
  
  <p><strong>EDIT:</strong> I should add that there are multiple child components rendered, as they're built from an array of objects</p>
  
  <p>Snippets:</p>
  
  <p>Parent:</p>
  
  <pre><code>class Product extends Component {
      state = {
          selected_ind: 0
      };
  
      handleContextChange = selected_ind =&gt; {
          this.setState({selected_ind});
      };
  
      render() {
          const contextValue = {
              data: this.state,
              handleChange: this.handleContextChange
          };
  
          //Desconstruct props for ease of use
          const {
              attr_data,
              variant,
              product_name } = this.props;
  
  
          return (
                  &lt;Container&gt;
                      &lt;Heading&gt;Product Options&lt;/Heading&gt;
                      &lt;IndexContext.Provider value={contextValue}&gt;
                          &lt;OptionTile
                              tileColor='grey'
                              onPress={ () =&gt; this.props.navigation.navigate('Variants', {
                                  attr_data: attr_data,
                                  selected_ind: this.state.selected_ind
                              })} //Replace with named function
                              option="Variant"
                              selected_ind={ this.state.selected_ind }
                              value={ selected_attr.name } /&gt;
                      &lt;/IndexContext.Provider&gt;
                      &lt;OptionTile
                          tileColor='grey'
                          option="Quantity"
                          value="1" /&gt;
                  &lt;/Container&gt;
  </code></pre>
  
  <p>Within OptionTile is the child I'd like to use the function within:</p>
  
  <pre><code>const VariantTile = (props) =&gt; {
      return (
          &lt;IndexContext.Consumer&gt;
              {({ handleChange }) =&gt; (
                  &lt;TouchableOpacity onPress={handleChange(props.index)}&gt;
                      &lt;AsyncImage
                          source={ props.img_src }
                          placeholderColor="#fafafa"
                          style={{ flex: 1, width: null, height: 200 }}
                      /&gt;
                      &lt;Text&gt;{ props.var_name }&lt;/Text&gt;
                      &lt;Text&gt;{ props.price }&lt;/Text&gt;
                      &lt;Text&gt;{ props.sku }&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              )};
          &lt;/IndexContext.Consumer&gt;
      )
  };
  </code></pre>
  
  <p>And the context component is simple:</p>
  
  <pre><code>const IndexContext = React.createContext();
  
  export default IndexContext;
  </code></pre>