CODEWITHSUNDEEP
reactjstypescriptasp.net-core
Jammer
Jammer

Reputation: 10208

React Context API - Element type is invalid

I'm just working through some tutorials on React and the context API am running through this tutorial:

https://medium.com/@mtiller/react-16-3-context-api-intypescript-45c9eeb7a384

I have newed up a new basic ASP.NET Core 2.0 site which I'm now migrating to using the new Context API instead of using state/props. I've immediately run into a problem that I'm not even clear what the problem is.

My component code is:

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

//interface ICounterState {
//    currentCount: number;
//}

const store = {
    currentCount: 1
};

const myContext = React.createContext(store);

export class Counter extends React.Component<RouteComponentProps<{}>> {
    constructor(props: any, context: any) {
        super(props, context);
        //this.state = { currentCount: 0 };
    }

    public render() {
        return (
        <myContext.Provider value={store}>
            <div>
            <h1>Counter</h1>

            <p>This is a simple example of a React component.</p>
                    <myContext.Consumer>
                        {state => 

                            <p>Current count: <strong>{state.currentCount}</strong></p>
                        }
                </myContext.Consumer>

            <button onClick={ () => { this.incrementCounter() } }>Increment</button>
            </div>;
        </myContext.Provider>    
        )};

    incrementCounter() {
        //this.setState({
        //    currentCount: this.state.currentCount + 1
        //});
    }
}

Which when run produces this error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The complete stack trace is:

vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273)
    at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799)
    at ReactCompositeComponentWrapper.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690)
    at Object.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868)
    at ReactCompositeComponentWrapper._updateRenderedComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30197)
    at ReactCompositeComponentWrapper._performComponentUpdate (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30156)
    at ReactCompositeComponentWrapper.updateComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30077)
    at ReactCompositeComponentWrapper.receiveComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29979)
    at Object.receiveComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12947)

The component is used here:

import * as React from 'react';
import { Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { MyComponent } from './components/MyComponent';

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={FetchData} />
    <Route path='/mycomponent' component={MyComponent} />
</Layout>;

Viewing the source in Visual Studio it has highlighted the state => as having an error of:

Parameter 'state' of function type implicitly has an 'any' type.

Since I'm still at the stage of blindly following tutorials until I get my head around things I'm really not sure of what I'm being told here. Also I can't see much functional difference between what I'm attempting and the tutorial I'm following (other than the tutorial is using an array).

How can I correct these issues to get this component to correctly run?

Upvotes: 3

Views: 446

Answers (1)

needsleep
needsleep

Reputation: 2715

This is an older issue but I just had the same problem when I tried to upgrade from an older version of React (16.2.0) to 16.5.2 just so I can use the new Context API.

My mistake was only updating the react package and not the react-dom package. After correctly updating react-dom this worked as expected.

Upvotes: 2

Related Questions