I'm having an issue when i want to render a login form view those issues started when i began to use context api for React. the error that show me right now is:

> 
> Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
>  Check the render method of `LoginForm`.
> 
> 
> 

the error is there:
[![enter image description here](https://i.stack.imgur.com/ddpBd.png)](https://i.stack.imgur.com/ddpBd.png)

**Index.js:**

```
    // React
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
import { LoginPage } from '../src/views/Login';

// 1
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

// Context Provider
import AppProvider from './context/context';
import { LoginForm } from './components/Form';

// 2
const httpLink = createHttpLink({
  uri: 'http://localhost:3000/graphql'
});

// 3
const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

// 4
export const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
})

ReactDOM.render(

    <ApolloProvider client={client}>
    <BrowserRouter>
      <AppProvider>
        <App />
      </AppProvider>  
    </BrowserRouter>
    </ApolloProvider>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

```

when i take the line out of the script, the one with Context.Consumer at the LoginForm component the error goes away. i tried to export the component with the default then wihout it with no success.

**Login Form:**

```
        // React
    import React, { Fragment } from 'react';

    // React apollo
    import { graphql } from 'react-apollo';
    import * as compose from 'lodash.flowright';

    // React router
    import { withRouter, Redirect } from 'react-router-dom';

    // import mutations
    import mutations from './mutations';

    // React bootstrap
    import { Container, Row, Form, Button } from 'react-bootstrap';

    // Import Style
    import './style.css';

    // Component
    import NavbarLayout from '../Navbar';

    // Context
    import Context from '../../context/context';

    export class LoginForm extends React.Component {

        render() {

            return(

                <Fragment>
                    <Context.Consumer>
                        {c => {
                            return(
                                <Container>
                                    <Form className="form-container">
                                        <h2 className="text-center pb-4">Ingreso</h2>
                                        <Form.Group controlId="formBasicEmail">
                                            <Form.Control name='email' onChange={e => c.get_data(e)} type="email" placeholder="Email" />
                                        </Form.Group>

                                        <Form.Group controlId="formBasicPassword">
                                            <Form.Control name='password' onChange={e => c.get_data(e)} type="password" placeholder="Contraseña" />
                                        </Form.Group>
                                        <div className="text-center">
                                            <Button className="button-login" variant="primary" onClick={e => c.submit(e)} type="submit">
                                                Ingresa
                                            </Button>
                                        </div>
                                    </Form>
                                </Container>
                            );
                        }}
                    </Context.Consumer>
                </Fragment>
            );
        }
    }

```

This component is called into this view:

```
        // React 
    import React, { Fragment } from 'react';

    // Component React
    import { LoginForm } from '../../components/Form';

    // React bootstrap
    import { Container, Row } from 'react-bootstrap';

    export const LoginPage = () => {
        return(
            <Fragment>
                <Container style={{marginTop: '2rem'}}>
                    <LoginForm />
                </Container>
            </Fragment>
        );
    }

```

The context Api file is:

```
        // React
    import React, { Fragment } from 'react';

    // React apollo
    import { graphql } from 'react-apollo';
    import * as compose from 'lodash.flowright';

    // React router
    import { withRouter, Redirect } from 'react-router-dom';

    // Mutation
    import mutations from './mutations';

    // Context
    const Context = React.createContext();

    class AppProvider extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                // Login & logout states
                login_credentials: {},
                isLogged: false,
                get_data: this.get_data,
                submit: this.submit,
            }
        }

        // Actions

        // Login & Logout

        get_data = async(e) => {
            e.preventDefault();
            const { name, value } = e.target;
            const data = { [name]: value };
            const newData = { ...this.state.login_credentials, ...data };
            this.setState({
                login_credentials: newData
            });

        }

        submit = async(e) => {
            e.preventDefault();
            const { signinUser } = this.props;
            const { login_credentials, isLogged } = this.state;

            try {
                let variables = login_credentials;
                const response = await signinUser({variables});
                const get_token = response.data.signinUser.token;

                // setting localStorage
                localStorage.setItem('token', get_token);
                this.setState({
                    isLogged: true
                });

                this.props.history.push({pathname: '/home', state: {isLogged: this.state.isLogged}});

            } catch(error) {
                console.log(error);
            }

        }

        // END LOGIN & LOGOUT ACTIONS

        render() {
            return(
                <Context.Provider value={this.state}>
                    {this.props.children}
                </Context.Provider>
            );
        }
    }

    export default compose(
        withRouter,
        graphql(mutations.signinUser, { name: 'signinUser' }),
    )(AppProvider)

```