Allow marking an array as "static"

[glenjamin]

I expected there to be an issue for this already, but couldn't find it. Apologies if this a dupe.

Occasionally it is useful to put a few elements in an array within render, when conditionally building different bits of the view.
React will issue a warning whenever an array is used that doesn't have keys - even if the author knows that this array is literal, and therefore doesn't require keys.

var label = "Label";
if (this.props.important) {
  label = ["Label", <Tag text="important" />];
}
return <div>
  <h3>{label}</h3>
  <p>{this.props.body}</p>
</div>

In this example, React will warn about lack of keys, even though they're not needed.

One option would be to extend React.addons.createFragment to accept an array, and use the indexes as keys.

label = React.addons.createFragment(["Label", <Tag text="important" />]);

[syranide]

+1 I've run into this a few times myself.

[monsanto]

+1

[zpao]

This fits in well with the idea of frags. For example, I think we want to make this possible:

label =
  <frag>
    Label
    <Tag text="important" />
  </frag>;

I'm not sure if we want to do it with another call like this, but the idea is definitely in line with what we're interested in.

[syranide]

@zpao 👍 I currently have that by overloading React.createElement for now :)

[jquense]

is the <frag/> syntax a proposed thing somewhere? It seems to solve a bunch of issues (like conditionals with arrays of elements) but I don't think i've seen any mention or timeline on it? Is there a place I could look for more info?

[zpao]

#2127 is the place we've been tracking frags.

[snit-ram]

👍 That's a common use case here at Yahoo, and we've been forcing keys.
This would be a nice addition

[syranide]

FYI, I'm currently using a utility based on createFragment for this purpose.

[jquense]

for folks interested this is what we came up with in the meantime and it works nicely for us: https://github.com/jquense/babel-plugin-jsx-fragment

[glenjamin]

I've recently discovered a fairly low tech way of doing this:

(<div><A /><B /><C /></div>).props.children

Haven't decided yet whether I actually like this, but it does seem to work nicely.

Would a PR that allows arrays in createFragment get any traction?

[gaearon]

Seems like #10783 and facebook/jsx#84 will address it.

[gaearon]

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Starting with React 16.2, you can do this now:

var label = "Label";
if (this.props.important) {
  label = (
    <React.Fragment>
      Label
      <Tag text="important" />
    </React.Fragment>
  );
}
return (
  <div>
    <h3>{label}</h3>
    <p>{this.props.body}</p>
  </div>
)

or, when the tools catch up with new syntax support,

var label = "Label";
if (this.props.important) {
  label = (
    <>
      Label
      <Tag text="important" />
    </>
  );
}
return (
  <div>
    <h3>{label}</h3>
    <p>{this.props.body}</p>
  </div>
)