I have array with thee values:
let elements = ["div", "span", "button"]
How can I dynamically generate these elements in DOM using forEach or map iterator in ReactJS?
So as output I want to have:
<div> Value1 <div>
<span> Value 2 </span>
<button> Click me! </button>
Use createElement directly, rather than writing JSX (which does that under the hood):
const Test = (props) => {
let elements = ["div", "span", "button"];
return (
<div>
{
elements.map((el, index) =>
React.createElement(el, { key: index }, "hello"))
}
</div>
);
};
ReactDOM.render(<Test />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>From the docs:
React.createElement(type, [props], [...children])Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span'), or a React component type (a class or a function).
I have found Gaurav Singhal sharing great example in terms of how to use React.createElement:
let WelcomeText = React.createElement(
"h1",
{ style: { color: "blue" } },
"This is a welcome text"
);
This will lead you to have
<h1 style="color:blue">
This is a welcome text
</h1>
but if you are just beginner or slow learner like me, and somehow you just need more reference to know whether there is alternative way, I have found Corentin de Boisset and array.map() both introducing how to use array.map() in JSX, I myself also use array.map() to play video in JSX and it works:
constructor (props) {
super (props);
this.state = {playList = []}
}
render() {
let dynamicPlayer = this.state.playList.map((items) => {
return (
<ReactPlayer
url= {items.source}//'storage/star_war.mp4'
className='react-player'
width='100%'
height='100%'
volume={items.volume}
controls = {true}
/>)
})
return (
<Container>
<div>{dynamicPlayer}</div>
</Container>
);
}
Though I would recommend React.createElement as well.