zamil
zamil

Reputation: 1930

TypeError: (0 , this.props.children) is not a function react + apollo

I have MyExampleComponent like this

<Query query={GET_UPGRADE_OFFER}>
            {({loading, error, data}) => {
                if (!loading && !error) {
                    return (<Mutation mutation={GET_UPGRADE_QUOTE}>
                        {(mutateIntegration, response) => (
                            <MyComponent mutateIntegration={mutateIntegration} {...response} data={data} />
                        )}
                    </Mutation>);

                }
                return null;
            }};
        </Query>

I have a component like this. Query wraps a Mutation. I want to pass the data from Query to Mutation

It throws an error in console TypeError: (0 , this.props.children) is not a function

This component is being called from another component

<Query>
  <ApolloConsumer>
    <MyExampleComponent />
  </ApolloConsumer>
</Query>

Upvotes: 1

Views: 1867

Answers (1)

zamil
zamil

Reputation: 1930

It was a mistake from my end.

The error was at }};. ; inside a component is considered as invalid children. Valid ones are components, expressions, null, false, true & undefined.

https://reactjs.org/docs/jsx-in-depth.html

Upvotes: 4

Related Questions