Dynamically generating React elements not assignind properties - reactjs

Question

I want to use my ViewModel Component to dynamically create elements and assign properties to them. The code I have is rendering, but not what I expect. It's rendering the text in a div instead of creating my custom Debug element.
Here is Debug:
import React, { Component } from 'react';
class Debug extends Component {
render() {
return (<h3>
{this.props.o}
</h3>)
}
}
export default Debug;
I want props.o to be a shorthand for object assigned to an element, assigned in ViewModel:
Here is my ViewModel:
import React, { Component } from 'react';
class ViewModel extends Component {
loadData() {
this.setState({});
}
componentWillMount() {
this.loadData();
if (!this.state) { return; }
let stateKeys = Object.keys(this.state);
console.log(stateKeys);
if (stateKeys.length <= 0) { return; }
let elems = {};
console.log("My statekeys" + stateKeys);
for (let key of stateKeys) {
let stateValue = this.state[key];
console.log("My state value: " + stateValue);
let tagName = stateValue[0];
let values = stateValue[1];
elems[key] = values.map((item, i) => {
return React.createElement(tagName, {o: item, key: key + "" + i});
});
}
}
render() {
let keys = Object.keys(this.state);
let output = [];
for (let k of keys) {
let group = this.state[k];
for (let elem of group) {
output.push(elem);
}
}
return (<div>{output}</div>)
}
}
And using with:
class Fight extends ViewModel {
loadData() {
console.log("Loading data with recent");
this.setState({
recent: [Debug, ["Lightning Blast for 155, Critical!", "Enemy Fire Punches for 70."]]
});
}
export default ViewModel;
HTML output:
<div><div>Lightning Blast for 155, Critical!Enemy Fire Punches for 70.</div></div>
No h3. The CreateElement seems to be putting the text into the body when I want it to go into the props.

Answer 1

Here is the working code for dynamically generating tags in React:
import React, { Component } from 'react';
class Debug extends Component {
render() {
return (<h3>
Hey{this.props['o']}
</h3>)
}
}
export default Debug;
class Fight extends ViewModel {
loadData() {
console.log("Loading data with recent");
let myState = {
"recent": [Debug, ["LBlast", "FPunch."]]
};
this.setState(myState);
}
ViewModel
import React, { Component } from 'react';
class ViewModel extends Component {
loadData() {
this.setState({});
}
componentWillMount() {
this.loadData();
}
render() {
if (!this.state) {
return (<div></div>)
}
if (!this.state) { return; }
let stateKeys = Object.keys(this.state);
console.log(stateKeys);
if (stateKeys.length <= 0) { return; }
let elems = {};
console.log("My statekeys" + stateKeys);
for (let key of stateKeys) {
let stateValue = this.state[key];
console.log("My state value: " + stateValue);
const TagName = stateValue[0];
console.log("What is tagname?" + TagName);
let values = stateValue[1];
elems[key] = values.map((item, i) => {
console.log("My item is" + item);
return <TagName o={item} key={key + "" + i}/>;
});
}
let keys = Object.keys(elems);
let output = [];
for (let k of keys) {
let group = elems[k];
for (let elem of group) {
output.push(elem);
}
}
console.log(output);
return <div>{output}</div>
}
}
export default ViewModel;