reactjs - create a bunch of divs via an array -

i'm trying produce bunch of divs (to play around infinite scroll). i'm trying this:

var arr = [];  (i = 0; i<10; i++) {    arr.push(i);  }  class list extends react.component{    render() {      var longlist = "";        arr.foreach(function(item,index){           longlist += '<div>' + item + '</div>';        });      return (<div>{longlist}</div>);    } } 

i'm getting following output:

<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> 

what should rendered divs instead of string? is, output looks this:

1 2 3 ... 

use .map() , simple jsx return divs want.

class list extends react.component{    render() {      var renderedoutput = arr.map(item => <div> {item} </div>)      return (       <div>         {renderedoutput}       </div>     );   } }