Spread syntax causes errors

[simonwjackson]

Stateful component example:

function Clickable(props, state, setState) {
  const {clicks = 0} = state;

  return H('button', {
      onclick() {
        setState({clicks: clicks + 1})
      }
    },
    `Clicked ${clicks} times`
  );
}

It works using this method:

R(
  H('div',
    H(Clickable),
    H(Clickable)
  ),
  document.body
)

but if I have an array of elements and try to spread them, i get an error

let a = H(Clickable)
let b = H(Clickable)

R(
  H('div',  ...[a, b]),
  document.body
)

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at map (<anonymous>:1:456)
    at Array.map (native)
    at g (<anonymous>:1:171)
    at map (<anonymous>:1:535)
    at Array.map (native)
    at g (<anonymous>:1:171)
    at mafivaz.js:14:1
    at https://static.jsbin.com/js/prod/runner-3.41.0.min.js:1:13926
    at https://static.jsbin.com/js/prod/runner-3.41.0.min.js:1:10855

Any ideas on why this doesn't work?

[wavesoft]

Hey @simonwjackson , I have seen this problem coming up quite often. Do you by any chance use babel transformation in your toolchain? Or are you trying this in the browser?

[simonwjackson]

Yes, I am running this through babel.

Is there a better way to approach this?

[wavesoft]

Can you try this https://github.com/wavesoft/dot-dom/tree/28b9014d251bcfd7c75e196b1836a9fcde570ea3 commit? I think it should have fixed the .apply issue.

[simonwjackson]

That seemed to work! Thank you!

[wavesoft]

Closing this since it's fixed with #16