React Context: TypeError: render is not a function

Adam Roberts

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 problem is I seem to be getting an error 'TypeError: render is not a function. (In render(newValue), render is an instance of Array' and an error in my console reads: '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.'

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.

EDIT: I should add that there are multiple child components rendered, as they're built from an array of objects

Snippets:

Parent:

class Product extends Component {
    state = {
        selected_ind: 0
    };

    handleContextChange = selected_ind => {
        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 (
                <Container>
                    <Heading>Product Options</Heading>
                    <IndexContext.Provider value={contextValue}>
                        <OptionTile
                            tileColor='grey'
                            onPress={ () => 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 } />
                    </IndexContext.Provider>
                    <OptionTile
                        tileColor='grey'
                        option="Quantity"
                        value="1" />
                </Container>

Within OptionTile is the child I'd like to use the function within:

const VariantTile = (props) => {
    return (
        <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>
    )
};

And the context component is simple:

const IndexContext = React.createContext();

export default IndexContext;
Estus Flask

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

React error: TypeError: render is not a function

From Java

Access React Context outside of render function

From Dev

React Context - Context and Child render are not updating

From Dev

TypeError: Jsonix.Context is not a function

From Dev

Context issue with Backbone view render function

From Dev

React Context undefined in Server Side Render

From Java

React onClick function fires on render

From Java

Dynamically building a render function in React

From Dev

React-router : render is not a function

From Dev

Render object arrays in react function

From Dev

React Native Context setUser is not a function

From Dev

Pass function from props to render function in react

From Dev

Is there a way to render multiple React components in the React.render() function?

From Dev

TypeError: Object is not iterable when working with react context

From Dev

NodeJs Using ExpressJs : TypeError: string is not a function at Function.app.render

From Dev

How to fix my React Context to render useEffect and reload table data

From Dev

Get value from firebase and render it to render function in react

From Dev

How to render component from a function outside the render method in React?

From Java

How to create dynamic href in react render function?

From Java

How to Call a Function inside a Render in React/Jsx

From Java

Is it possible to return empty in react render function?

From Dev

Using jQuery inside of a React render function

From Dev

React.js call recursive function in render

From Dev

React Native render function throws error

From Dev

React - call handler from var in render function

From Dev

Skipping Views in React Native render function

From Dev

React Redux create container with render function for template

From Dev

react call a function from ReactDOM.render

From Dev

React with Typescript: Render components from `map` function

Related Related

  1. 1

    React error: TypeError: render is not a function

  2. 2

    Access React Context outside of render function

  3. 3

    React Context - Context and Child render are not updating

  4. 4

    TypeError: Jsonix.Context is not a function

  5. 5

    Context issue with Backbone view render function

  6. 6

    React Context undefined in Server Side Render

  7. 7

    React onClick function fires on render

  8. 8

    Dynamically building a render function in React

  9. 9

    React-router : render is not a function

  10. 10

    Render object arrays in react function

  11. 11

    React Native Context setUser is not a function

  12. 12

    Pass function from props to render function in react

  13. 13

    Is there a way to render multiple React components in the React.render() function?

  14. 14

    TypeError: Object is not iterable when working with react context

  15. 15

    NodeJs Using ExpressJs : TypeError: string is not a function at Function.app.render

  16. 16

    How to fix my React Context to render useEffect and reload table data

  17. 17

    Get value from firebase and render it to render function in react

  18. 18

    How to render component from a function outside the render method in React?

  19. 19

    How to create dynamic href in react render function?

  20. 20

    How to Call a Function inside a Render in React/Jsx

  21. 21

    Is it possible to return empty in react render function?

  22. 22

    Using jQuery inside of a React render function

  23. 23

    React.js call recursive function in render

  24. 24

    React Native render function throws error

  25. 25

    React - call handler from var in render function

  26. 26

    Skipping Views in React Native render function

  27. 27

    React Redux create container with render function for template

  28. 28

    react call a function from ReactDOM.render

  29. 29

    React with Typescript: Render components from `map` function

HotTag

Archive