Search code examples
javascripteslintmobxreact-proptypes

How to set the PropType of a mobx store?


I’m using here: React, ESLint, Mobx.

I'm not sure how to set correctly the PropType of a mobx store I pass with the Provider.

ESLint gives me this error:

[eslint] store is missing in props validation (react/prop-types)

Im passing a store through a Provider like this:

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    appLocation
);

in App component I use one of the store values, this is my my mobx store:

import { observable } from 'mobx';

class Store{
    @observable x = 'Hello World!';
}

export const store= new Store();

and this is my App Component:

// Dependencies
import React from 'react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';

// Components
import TestComponent from './TestComponent';

// App Component
@inject('store')
@observer
export default class App extends React.Component {
    render() {
        return (
            <div>
                <TestComponent store={this.props.store} />     // the Error above
            </div>
        );
    }
}

App.propType = {
    store: PropTypes.any    // What is the correct way to set this prop?
};

Solution

  • You have a small typo. It is propTypes, not propType:

    @inject('store')
    @observer
    export default class App extends React.Component {
        static propTypes = {
            store: PropTypes.any
        };
    
        render() {
            return (
                <div>
                    <TestComponent store={this.props.store} />
                </div>
            );
        }
    }