Equivalent in React of *ngFor in Angular 2
You can use map
on numbers and create the options dynamically like this:
<select>
{
numbers.map(el => <option value={el} key={el}> {el} </option>)
}
</select>
Check this example:
var numbers = [...Array(100).keys()];
var App = () => {
return(
<select>
{
numbers.map(el => <option value={el} key={el}> {el} </option>)
}
</select>
)
}
ReactDOM.render(<App/>, 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'/>
RepeatModule
is the equivalent in Reactjs
ReactDOM.render(<RepeatModule items={items} />,
document.getElementById('react-content'));
LIVE DEMO
I would recommend the following solution.
Inside the render and return in Reactjs:
{
myArrayOfData.map((val, index) => {
return (
<div key={index}>
{ val }
</div>
);
})
}
myArrayOfData can for example be this.state.myArray
.