React Context: TypeError: render is not a function

Question

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.

The pro

Answer 1

As the error states, <Consumer> should have the only child, and it should be a function. The error appears when it has multiple children, including text nodes.

; after embedded expression causes the problem. It's not a part of an expression, and making it a part of it would result in syntax error.

It should be:

<IndexContext.Consumer>
    {({ handleChange }) => (
        <TouchableOpacity onPress={handleChange(props.index)}>
            <AsyncImage
                source={ props.img_src }
                placeholderColor="#fafafa"
                style={{ flex: 1, width: null, height: 200 }}
            />
            <Text>{ props.var_name }</Text>
            <Text>{ props.price }</Text>
            <Text>{ props.sku }</Text>
        </TouchableOpacity>
    )}
</IndexContext.Consumer>