React Context: TypeError: render is not a function : <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>
