React create element with key

Question

I'm attempting to render an array of react components without JSX with keys. The problem Unfortunately, I'm dealing with a JS error when i attempt to set the keys inside of my array:

Uncaught (in promise) TypeError: Cannot assign to read only property 'key' of object '#<Object>'

Here is the code:

import React, { Component } from 'react';

class Test extends Component {

  mapChildObjects = () => {
    const { children } = this.props;
    let arr = [];

    for (let i = 0; i < children.length; i++) {
      arr.push(React.createElement(children[i]));
      arr[i].key = i;
    }
    return arr;
  }

  render() {

    return (
      <div>
        <div className={s.content}>
          {this.mapChildObjects()}
        </div>
      </div>
    );
  }
}


export default Test

After reading the documentation: https://reactjs.org/docs/react-without-jsx.html, but was unable to find examples of adding keys inside of createElement.

Note: this renders fine; the issue is not with the rendering of the component, but with the ability to add keys creating elements.

IIRC key is a property, so I think something like React.createElement(children[i], {key: i}) might work. — zzzzBov
– zzzzBov, Commented Apr 29, 2019 at 19:01

Gaʀʀʏ · Accepted Answer · 2019-04-30 01:54:53Z

24

As zzzzBov mentioned in the comments, key is a prop and can be passed inside an object as the second parameter of createElement.

Example

mapChildObjects = () => {
    const { children } = this.props;

    return children.map((child, i) => {
       return React.createElement(child, {key: i});
    });
  }

edited Apr 30, 2019 at 1:54

answered Apr 29, 2019 at 19:09

Gaʀʀʏ

4,5403 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zzzzBov Over a year ago

👍 for the writeup.

GeraGamo Over a year ago

Works as a charm

GeraGamo · Accepted Answer · 2024-02-20 02:48:45Z

0

  const tag = "div";
  const key = "myDiv";
  const className ="your class Name";
  const your childrenOrText = "thisCaseisTextOnly";

  const theTag = createElement(tag, { key: key, className }, childrenOrText );

answered Feb 20, 2024 at 2:48

GeraGamo

2463 silver badges6 bronze badges

Collectives™ on Stack Overflow

React create element with key

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related