How to implement each_slice in rails-react views?

Question

I have Parent component Monsters, there i render Monster component.

for monster in @state.monsters
      React.createElement Monster, key: monster.id, monster: monster, team: @state.team...

Inside monster:

div className: 'col-md-4',
  hr {}
  img
    className: 'img-responsive img-circle thumbnail'

....

Problem there is a bootstrap columns and rows, its break. I need method like each slice, to wrap each(3) objects into bootstrap row. I used lodash _chunk, and custom Array.prototype variants, but react variables not aviable inside this loops.

Array::each_slice = (size, callback) ->
  i = 0
  l = @length
  while i < l
    callback.call this, @slice(i, i + size)
    i += size

This is function for each slice, and then i make this.

@state.array.each_slice 3, (slice) ->
  for component in slice
    React.createElement Monster, key: component.id, monster: component, team: @state.team etc....

Uncaught TypeError: Cannot read property 'team' of undefined

Can anybody help me?

are you able to get @state in your views? – chaitanya Sep 21 '15 at 08:46 — chaitanya, Sep 21 '15 at 08:46

score 0 · Answer 1 · answered Oct 07 '15 at 03:44

The value of @ is different inside the each_slice callback. To see the difference, try this:

console.log(@) # `@` is the React component
@state.array.each_slice 3, (slice) =>
  console.log(@) # `@` is `window`, the global object
  for component in slice
    React.createElement Monster, team: @state.team # ...

To preserve the value @ inside the callback, use a "fat-arrow" (=>), like this:

console.log(@) # the React component
@state.array.each_slice 3, (slice) =>
  console.log(@) # still the React component :)
  for component in slice
    React.createElement Monster, team: @state.team # ...

How to implement each_slice in rails-react views?

1 Answers1