Dynamic tag and key?

Question

JavaScript

There are a number of tags that are stored in the store, I display them in the component, it requires a key, please tell me how to add ?, and how to add a class to these items?

class Main extends Component {
  render() {

    return (
      <article className="main">
        <div className="main-root">
        	{ this.props.counter.map((item) => React.createElement(`${item.tag}`))}
        </div>
        <Edit/>
      </article>
    );
  }
}

Answer 1

Option using JSX:

class Main extends Component {
  render() {

    return (
      <article className="main">
        <div className="main-root">
          {this.props.counter.map(({ tag: Tag }, i) => <Tag key={i} />)}
        </div>
        <Edit/>
      </article>
    );
  }
}