Question about state and adding elements to the collection

[richard-engineering]

I have this bit of code based on what I can tell from the TODOMVC is the right way to define state

export default class Entry extends Model {
  default = {
    name: 'test_name'
  }
}

export default class Home extends Component {

  constructor(props) {  // componentWillMount
    super(props);
  }

  state = {
    entries: Entry.Collection,
  }

In the console when debugging (eg in render or in constructor) I notice this.state.entries.add does not exist. this.state.entries.create().add is defined. What would be the proper way to add something to the entries collection? Should I declare

state = {
  entries: Entry.Collection.create()
} 

instead?

[richard-engineering]

Also, adding on top of your answer in VoliJS/NestedLink#12, state.getLink is undefined for me. I assume I need to import valuelink and use valuelink like normal instead? The documentation on this page seems to imply that I get it for free from nestedtypes.

render() {
  const { state } = this;
  const entriesLink = state.getLink( 'entries' );
  return (
    ....
    {
      entriesLink.map((entryLink, key) => <li key={key}>{entryLink.value.name}</li>)
    }
}

Edit: The following is defined, but it doesn't return anything even though I added an entry to the collection? I think the documentation on the front page needs to be updated.

state.entries.getLink()

[richard-engineering]

I also tried not using classes with React.createClass and Model.extend per the examples and I get
Uncaught TypeError: this.defaults is not a function in the console. I am compiling to electron via webpack, maybe something is weird with my setup.

'use strict';

import React from 'nestedreact';
import { Entry } from '../models/Entry.js';

export const Home = React.createClass({

  state: {
    entries: Entry.Collection
  },

  render() {
    return (
      <div>
        <div>
          <h2>HOME TEST</h2>
        </div>
      </div>
    );
  }
});

'use strict';

import React from 'nestedreact';
import { Model } from 'nestedtypes';

export const Entry = Model.extend({

  defaults: {
    name: "default_name"
  }
});

[gaperton]

You forgot @define decorator. Must be imported either from nestedreact or nestedtypes. Must precede the class definition of the Component and the Model.

@define is the place where all the magic happens, it performs meta-transformations crucial for the things to work. If you can't or don't want to use decorators, just call YouClass.define() right after the definition. That's what this decorator does.

[gaperton]

.createClass and .extend work without @define, of course. I will check your example locally.

[gaperton]

Your last example works perfectly in Chrome. Try to take any of the examples from examples folder (except flux_comparison) as starting boilerplate for your test.

[richard-engineering]

Thank you for the replies, I didn't even know that decorators existed in javascript, hahah. I will try this when I have the time and let you know, we are quite busy at work right now