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> ); } }
Comments
Post a Comment