this.context.reactor undefined in the NuclearComponent decorator

[dtothefp]

Example is here https://github.com/dtothefp/nuclear-decorator. Maybe I'm doing something stupid but if I

//app.jsx
import React from 'react';
import { nuclearComponent } from 'nuclear-js-react-addons';

@nuclearComponent({
  mock: true
})

export default class App extends React.Component {
  render() {
    return (
      <h1 className='sample'>Hi!!</h1>
    );
  }
}
//index.jsx
import React from 'react';
import App from './components/App';
import reactor from './modules/reactor';

React.render(
  <App reactor={reactor} />,
  document.getElementById('app')
);

I get the error Uncaught TypeError: Cannot read property 'evaluate' of undefined.

If in nuclearComponent.js line 42 I change

return getState(this.context.reactor, dataBindings) //breaks

return getState(this.props.reactor, dataBindings) //works

Is there some way I should be binding the Reactor to the component context that I'm not aware of?

[Sinewyk]

provideReactor is there for that =). It's a HoC where you send the reactor as a prop, and it inject it into react context to get picked up by the mixin or the nuclearComponent. In your case, simply

@provideReactor
export default class App extends React.Component {
...
}

or

import App from './components/App';
const WrappedApp = provideReactor(App);

React.render(
  <WrappedApp reactor={reactor} />,
  document.getElementById('app')
);

Both the nuclear mixin and component expect a reactor to be present on the reactor key of react context. Maybe I should have been clearer about that in the readme.

[dtothefp]

nvm, saw your tests using @provideReactor and @nuclearComponent in combo...duh

https://github.com/jordangarcia/nuclear-js-react-addons/blob/master/test/nuclearComponent.spec.js#L46

[dtothefp]

@Sinewyk

check this out https://gist.github.com/dtothefp/a8bed4dc372fc2766fcb this is how I used React.cloneElement to add props to child inputs and transfer their data to the form level, not sure if this is a hack or not?

I could use advice on the getters and the stores and where I should be performing validation logic i.e. in the store or in the component. It's all loosely based off this guy's writeup who is doing all validation in the component.

http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html