SpreadChildren

[NekR]

I would like to propose this syntax:

const items = [
  <li />,
  <li />,
  // ...
];

<ul>
  <li />
  { ...items }
  <li />
</ul>

For React this would transform into this:

// Simplified version
React.createElement('ul', null, <li />, ...items, <li />);

Why? Because some times in conditions it's needed to use an array with statically (never changing) defined JSX items. I think it's reasonable since workaround was proposed but just without JSX syntax: https://github.com/facebook/react/issues/2816#issuecomment-69014502

[sebmarkbage]

This is already part of the JSX spec. See JSXChildExpression. https://github.com/facebook/jsx

However, it is not allowed as part of the React implementation of JSX. The best practice is to use nested arrays to ensure that different child sets have unique keys.

The issue of putting static items in an array and not wanting to assign keys to them could be solved by a fragment syntax for example. This could mark them as static for the key warning.

const items = <><li /><li /></>;