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 plain 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

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 plain 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

• javascript
• reactjs
• web
• jsx

• If you render a list, every ponents needs a key. – T4rk1n Commented Jul 17, 2017 at 23:50
• I pletely understand why there needs to be a key, and how I could go about doing it during instantiation. I'm just asking if it's possible to do it after instantiation so it could be done once in generateWrapper instead of for every single ponent – Right2Drive Commented Jul 17, 2017 at 23:56
• I normally use [].map((e, i) => <div key={i}>{e}</div>). – T4rk1n Commented Jul 18, 2017 at 0:00
• I have also been remended elsewhere to create a wrapper ponent for MyElement that adds a key to MyElement, just to provide all the alternatives I have received for those looking for answers as well – Right2Drive Commented Jul 18, 2017 at 0:00

1 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>
  );
}