Workshop: Mixins - only show odd numbers

See related slides for this part: http://omniscientjs.github.io/workshop-slides/#61

← Previous task , el); var updatedShow = show.updateIn(['episodes'], episodes => episodes.push('Volcano')); setTimeout(() => React.render(, el), 1000); ">Next task →

// ---
// Assignment: Create two components, one that renders all numbers
// it is passed through props, and one that only renders odd
// numbers passed through its props.
// ---

var onlyShowOddNumbers = {
  // Complete the shouldComponentUpdate mixin such that
  // it will only return true when the passed number
  // of the props is not divisible by two
  shouldComponentUpdate: function (nextProps) {
    return true;
  }
};

var Numbers = React.createClass({
  render: function () {
    return <div>
      // Render AllNumbers

// Render OddNumbers

</div>;
  }
});

// Implement the AllNumbers component. It should
// render all numbers it gets passed on its props
var AllNumbers = React.createClass({
  render: function () {

}
});

// Implement the OddNumbers component. It should only
// render odd numbers it gets passed on its props
var OddNumbers = React.createClass({
  render: function () {

}
});

// This loop will render your Numbers component
// passing both odd and even numbers
var n = 0;
setInterval(function () {
  React.render(<Numbers number={n++} />, el);
}, 1000);

Tasks

← Previous task , el); var updatedShow = show.updateIn(['episodes'], episodes => episodes.push('Volcano')); setTimeout(() => React.render(, el), 1000); ">Next task →

Available globals/variables

Use el to get to an element you can render to with your Omniscient components!

React: React instance
omniscient/component: Omniscient instance
immstruct: Immstruct instance
Immutable: Immutable.js instance
Cursor: Cursor (Immutable.js contrib)
redux: redux instance
reduxThunk: reduxThunk instance
reactRedux: reactRedux instance

Testing

describe: new test suite (mocha)
it: new test (mocha)
xit: pending test (mocha)
xdescribe: pending scenario (mocha)
before/after: run code before or after all tests (mocha)
beforeEach/afterEach: run code before or after each tests (mocha)
chai: chai.js assertion library