title: REact error Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead
body: <p>I am trying to login into my app. But I get an error saying: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
  I can login but i don't want to clean this error. Thanks for you help
  <a href="https://i.stack.imgur.com/ALJlT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ALJlT.png" alt="enter image description here"></a></p>
  
  <p>Component Myapp</p>
  
  <pre><code>import { ApolloProvider } from '@apollo/client'
  import client from '../config/apollo'
  import StateOrder from '../Context/Orders/StateOrder'
  import '../styles.css'
  const MyApp = ({ Component, pageProps }) =&gt; {
    return (
      &lt;ApolloProvider client={client}&gt;
        &lt;StateOrder&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/StateOrder&gt;
      &lt;/ApolloProvider&gt;
    )
  }
  export default MyApp
  </code></pre>
  
  <p>Component index</p>
  
  <pre><code>import Layout from '../Components/Layout'
  import Client from '../Components/Client'
  import { gql, useQuery } from '@apollo/client'
  import { useRouter } from 'next/router'
  import Link from 'next/link'
  
  const GET_CLIENTS_BY_USER = gql`
  query getClientsBySalesman{
    getClientsBySalesman{
      id
      name
      surname
      company
      email
    }
  }`
  
  const Index = () =&gt; {
    const router = useRouter()
    const { data, loading, error } = useQuery(GET_CLIENTS_BY_USER)
  
    if (loading) return &lt;p className="my-2 bg-blue-100 border-l-4 border-blue-700 p-4 text-center"&gt;Carregant...&lt;/p&gt;
  
    if (error || !data.getClientsBySalesman) {
      localStorage.removeItem('token');
      return router.push('/login')
    }
  
    return (
      &lt;div&gt;
        &lt;Layout&gt;
          &lt;h1 className="text-2xl text-gray-800"&gt;Clients&lt;/h1&gt;
          &lt;Link href="/nouclient"&gt;
            &lt;a className="bg-blue-800 py-2 px-5 mt-3 inline-block text-white rounded text-sm hover:bg-gray-800 uppercase w-full lg:w-auto text-center"&gt;Nou Client&lt;/a&gt;
          &lt;/Link&gt;
          &lt;div className="sm:overflow-x-scroll"&gt;
            &lt;table className="table-auto shadow-md mt-10 w-full w-lg"&gt;
              &lt;thead className="bg-gray-800"&gt;
                &lt;tr className="text-white"&gt;
                  &lt;th className="w-1/5 py-2"&gt;Nom&lt;/th&gt;
                  &lt;th className="w-1/5 py-2"&gt;Empresa&lt;/th&gt;
                  &lt;th className="w-1/5 py-2"&gt;Email&lt;/th&gt;
                  &lt;th className="w-1/5 py-2"&gt;Eliminar&lt;/th&gt;
                  &lt;th className="w-1/5 py-2"&gt;Editar&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody className="bg-white"&gt;
                {data.getClientsBySalesman.map(client =&gt; (
                  &lt;Client
                    key={client.id}
                    client={client} /&gt;
                ))}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/Layout&gt;
      &lt;/div &gt;
    )
  }
  export default Index
  </code></pre>
  
  <p>Component StateOrder</p>
  
  <pre><code>import React, { useReducer } from 'react'
  import ContextOrder from './ContextOrder'
  import ReducerOrder from './ReducerOrder'
  
  import {
    SELECT_CLIENT,
    SELECT_PRODUCT,
    PRODUCT_QUANTITY,
    UPDATE_TOTAL
  } from '../../types'
  
  const StateOrder = ({ children }) =&gt; {
    const initialState = {
      client: {},
      products: [],
      total: 0
    }
    const [state, dispatch] = useReducer(ReducerOrder, initialState)
    const addClient = client =&gt; {
      dispatch({
        type: SELECT_CLIENT,
        payload: client
      })
    }
  
    const addProduct = selectProducts =&gt; {
      let newState
      if (state.products.length &gt; 0) {
        newState = selectProducts.map(product =&gt; {
  
          const newObject = state.products.find(productState =&gt; productState.id === product.id);
          return { ...product, ...newObject }
        })
      } else {
        newState = selectProducts;
      }
      dispatch({
        type: SELECT_PRODUCT,
        payload: newState
      })
    }
  
    const productQuantity = newProduct =&gt; {
      dispatch({
        type: PRODUCT_QUANTITY,
        payload: newProduct
      })
    }
  
    const updateTotalOrder = () =&gt; {
      dispatch({
        type: UPDATE_TOTAL
      })
  
    }
    return (
      &lt;ContextOrder.Provider
        value={{
          client: state.client,
          products: state.products,
          total: state.total,
          addClient,
          addProduct,
          productQuantity,
          updateTotalOrder
        }}
      &gt;
        {children}
      &lt;/ContextOrder.Provider&gt;
    )
  }
  export default StateOrder
  </code></pre>