Can you add a key to a React JSX Element after it's instantiated?

Question

Given the following:

function generateWrapper(...elements) {
    return (
        <div>
            {...elements}
        </div>
    );
}

ReactDOM.render(
    generateWrapper(
        <MyElement name="first" />,
        <MyElement name="second" />,
    ),
    document.getElementById("app"),
);

React will rightfully complain that I haven't added a key property to each of the children of the wrapper div. How can I do this? Or is this against the spirit of react development? Thanks for any answers in advance!

PS: Yes there is a similar question I looked at but it seemed to be targeting users not using JSX

PPS: I do realize I can merely add a key to first and second MyElement's but this is what I'm attempting to avoid

edit: Changing code to better suit my circumstances

Answer 1

Take a look at React.cloneElement. You could use that to create and attach the key property inside your generateWrapper method.

function generateWrapper(...elements) {
  return (
    <div>
      {
        elements.map(element =>
          React.cloneElement(element, { key: 'your-unique-key-here' })
      }
    </div>
  );
}