Initializing an observable class property in component constructor

[hyperh]

Following this article: https://medium.com/@mweststrate/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e#.hzcbmc5r8. Specifically this gist

I get the following errors

warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `AppContainer`
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `AppContainer`.

Here's my code. I'm using Webpack if that matters.
I would like to initialize this.matches depending on the values of this.props.items.

import React, { PropTypes } from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

/* eslint-disable */
@observer class Component extends React.Component {
  @observable matches = null;

  constructor(props) {
    super(props);
    this.matches = [1, 2];
  }

  render() {
    return (
      <div>
        <div>Vote</div>
        {this.props.items.map(item => <div>{item.name} {item.votes}</div>)}
      </div>
    );
  }
}

Component.propTypes = {
  items: PropTypes.object,
};

export default Component;

[mweststrate]

using babel? what does your import statement in app container look like?

Op ma 4 jul. 2016 17:07 schreef hyperh notifications@github.com:

Following this article:
https://medium.com/@mweststrate/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e#.hzcbmc5r8

I get the following errors

warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of AppContainer
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of AppContainer.

Here's my code

import React, { PropTypes } from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

/* eslint-disable */
@observer class Component extends React.Component {
@observable matches = null;

constructor(props) {
super(props);
this.matches = [1, 2];
}

render() {
return (

Vote

{this.props.items.map(item =>

{item.name} {item.votes}

)}

);
}
}

Component.propTypes = {
items: PropTypes.object,
};

export default Component;

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#384, or mute the thread
https://github.com/notifications/unsubscribe/ABvGhEN-lPa0XXPsLakz0899U5_cV6Pfks5qSSHEgaJpZM4JEcyD
.

[hyperh]

@mweststrate Yes, using babel. I can't tell what AppContainer is referring to, because webpack is building a bundle for me.

If I take out the constructor, the app runs fine. I just won't be able to properly initialize the observable based on the initial props then.

But in terms of which component is importing this problematic component, here's the code

import React from 'react';
// import actions from '../actions/';
import store from '../stores/';

import Component from '../components/myThing/';

export default () => (
  <Component
    items={store.itemStore.items}
  />
);

[hyperh]

@mweststrate I figured it out. I had strict mode enabled. The following code works, but it's a bit ugly.

I just noticed that article is yours haha. Perhaps update it to point out possible issues following it if you are using strict mode. Great article by the way!

import React, { PropTypes } from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

/* eslint-disable react/prefer-stateless-function */
/* eslint-disable */
@observer class Component extends React.Component {
  @observable matches = null;

  constructor(props) {
    super(props);

    const initMatches = action(() => this.matches = 'TEST MATCHES');
    initMatches();
  }

  render() {
    return (
      <div>
        <div>Vote</div>
        {this.props.items.map(item => <div>{item.name} {item.votes}</div>)}
        {this.matches}
      </div>
    );
  }
}

Component.propTypes = {
  items: PropTypes.object,
};

export default Component;

[mweststrate]

Looks fine. Usually this error refers to an import / export issue (using a
non default import for a non-default export or something like that). Have
you shareable project setup? Otherwise I suggest to set break on exceptions
in your debugger and check where it is trying to render undefined stuff

Op ma 4 jul. 2016 om 17:15 schreef hyperh notifications@github.com:

@mweststrate https://github.com/mweststrate Yes, using babel. I can't
tell what AppContainer is referring to, because webpack is building a
bundle for me.

But in terms of which component is importing this problematic component,
here's the code

import React from 'react';
// import actions from '../actions/';
import store from '../stores/';

import Component from '../components/myThing/';

export default () => (

);

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#384 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/ABvGhO5jT4deYji2WwypmQ5hPyLWtGsjks5qSSOkgaJpZM4JEcyD
.

[mweststrate]

Ah yeas, there is an open issue for that, see #338