Equivalent to * ngFor reaction in Angular 2

Question

I want to show a dynamic selection with values ​​from 1 to 100 in the react component.

In Angular 2

<select> <option *ngFor="let i of numbers">{{i}}</option> </select> <!--numbers is an array [1,2,3,4,...100]--> 

How is it in real life?

Answer 1

You can use map for numbers and dynamically create parameters as follows:

 <select> { numbers.map(el => <option value={el} key={el}> {el} </option>) } </select> 

Check out 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'/> 

Answer 2

RepeatModule is equivalent in Reactjs

 ReactDOM.render(<RepeatModule items={items} />, document.getElementById('react-content')); 

Live demo

Answer 3

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 be, for example, this.state.myArray .