javascript - Loop with React? -

using react, implementing dexie.js example. however, don't believe particularly important. know how execute loop of objects in indexdb database using react.

as shown in code below, dayta holds database, , stores friends name , age values. when function carveit run, takes users have typed in , places value on {this.state.etv}. code works.

however, not know how have {this.state.etv} show entries. is, shows recent addition. understand have execute kind of loop, , use map function, unsure how go that.

var react = require('react');  module.exports = react.createclass({     getinitialstate: function(){         return { etv:'' }         },      carveit:function(){         var enteringtitle = document.getelementbyid('entertitle').value;         var enteringmessage = document.getelementbyid('enterentry').value;               var dayta = new dexie('testcase');         dayta.version(1).stores({             friends:'name, age'             });              dayta.open().catch(function(error){         alert("oh no son: " +error);             });          dayta.friends.add({             name: enteringtitle,             age: enteringmessage             });              dayta.friends.each((friend)=>{             this.setstate({etv: friend.name});          });          },          functionrun:function(){         return (<div>             <ul>                 <li>{this.state.etv}</li>                </ul>                     <p>entry title</p>                 <input id="entertitle" type="text" classname="form-control"/>              <p>your entry</p>                 <textarea id="enterentry" classname="form-control"></textarea>               <input id="entrytitle" type="submit" value="publish" onclick={this.carveit} />                 </div>);     },          render:function(){         if (this.props.contentadd){             return this.functionrun();         }         else {             return null;         }         }  }); 

you can perform loop separately , have return jsx. can use return value in template since arrays of jsx partials supported.

render: function() {     var itemelements = this.state.items.map(function(item, i) {         return (             <li>{item}</li>         );     });      return (         <ul>             {itemelements}         </ul>     ); }