Wsrtjtyk

Issue: I am getting an error when attempting to inject a MST store into react class component:

Error: Uncaught [Error: MobX injector: Store 'auth' is not available! Make sure it is provided by some Provider

the error stems from the LoginForm component posted below, and is nested under another component (not sure if this is the issue, as to say each component needs a <Provider>?)

component hierarchy:

Application (contains no Provider)

    |__ Authentication (contains no Provider)

        |__LoginForm

a little code:

import { AuthenticationStore } from './stores/AuthenticationStore'



const auth = AuthenticationStore.create()



ReactDOM.render(

  <Provider auth={auth}>

    <Application />

  </Provider>,

  document.getElementById('root')

);





//Application

const Application = inject('auth')(observer(class Application extends 

Component {

  render() {

    console.log(this.props.auth) // logs the store as expected

    return (

      <div className={styles.applicationContainer}>

        <Authentication/>

      </div>

    )

  }

}))



export default Application



// LoginForm

const LoginForm = inject('auth')(observer(class LoginForm extends Component {

  render() {

    return (

       <div></div>

    )

  }

}))



export default LoginForm

and to the question:

If not this, what is the preferred protocol for passing the store to child components (without passing as props)?

As always, thanks in advance for any and all input. If this is a duplicate (I couldn't find this particular error), please mark as such and I will update accordingly...