react jsx - Looping in Render() function of ReactJS -

i have array of objects need loop output on getting stuck. tried using jquery's .each() without success.

render: function() {   return (   $.each(events, function(k, e) {      <div classname="event-item-wrap">      <div classname="event-item" style="backgroundimage:e.image">        <div classname="event-item-date">e.date</div>        <div classname="event-item-title">e.title</div>           <div classname="event-item-price">e.price</div>        <div classname="event-item-bottom">          <div classname="event-item-tags">            <ul>              <li>#professional</li>                <li>#livejazz</li>              <li>#courtet</li>            </ul>          </div>        </div>      </div>      </div>      });   ); } 

my array contains simple javascript objects keys , values. how can render them in react?

here example of how looping done in reactjs

var list = react.createclass({    render: function() {      return (     { this.props.data.map(function(e) {             var eventstyle = {               backgroundimage:e.image             };              return (                      <div classname="event-item-wrap">                       <div classname="event-item"style="{eventstyle}">                       <div classname="event-item-date">{e.date}</div>                      <div classname="event-item-title">{e.title}</div>                          <div classname="event-item-price">{e.price}</div>                      <div classname="event-item-bottom">                       <div classname="event-item-tags">                   <ul>                     <li>#professional</li>                       <li>#livejazz</li>                     <li>#courtet</li>                   </ul>               </div>           </div>       </div>    </div>              )         })     }     );  } });    react.render(<list data={ (array goes here) }  />, document.body);