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?
};
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>
);
}
}