react: key warnings

[dereke]

I seem to be getting a lot of key warnings when using hyperx with react. Here is an example that generates a key warning but shouldn't really:

const React = require('react')
const hyperx = require('hyperx')
const hx = hyperx(React.createElement)

hx`<div><a href="#">link</a></div>`

If I add a key to the anchor tag the warning goes away - but I shouldn't really need to do that.

Any solutions to this?

[dereke]

I've done a bit more research on this. When you have this JSX:

<div><a href="#">link</a></div>

it will output this JS:

  return React.createElement(
    "div",
    null,
    React.createElement(
      "a",
      { href: "#" },
      "link"
    )
  );

The example I gave above:

hx`<div><a href="#">link</a></div>`

Produces this JS:

  return React.createElement(
    "div",
    null,
    [
      React.createElement(
        "a",
        { href: "#" },
        "link"
      )
    ]
  );

Note the last parameter is an array rather than an element. React.createElement can take either an array of elements as the last parameter or a spread of elements. When an array is supplied it warns that you should add key properties to uniquely identify them.

Hyperx seems to create arrays rather than spreading the children which is why we get key warnings.

[AlecRust]

Any ideas on this? Is anyone using hyperx without all these React warnings?

[s9k]

function createElement(Component, props, children) {
    return React.createElement(Component, props, ...children);
}

const hx = hyperx(createElement);

[goto-bus-stop]

i think @s9k's solution is the best way to go. documentation patch welcome!