ReactJs data inside loop empty

Question

<div className="col-md-12">
  <div className="row">
     {shopeeship.map(function (key,value) {
       if(key.enabled){
         console.log("yes");
         <div className="col-md-6">
           <div className="form-group">     
              <span className="mr-4 pr-4">
                  <IntlMessages id="shopee.poswm" />
               </span>                                                                       
               <label className="pull-right" title="">
                <Switch/>
               </label>
            </div>
           </div>
      }})}
          </div>
 </div>

I have some data and want to loop through it to render some UI. In the above code I tried to loop the data and I checked that if the key enabled then to echo the html value. It successfully prints yes in console log but the html does not render as expected. Anyone has faced such an issue before? Please help.

Answer 1

It's because you forgot to return your html from loop

Do this

<div className="col-md-12">
  <div className="row">
     {shopeeship.map(function (key,value) {
       if(key.enabled){
         console.log("yes");
         return(
           <div className="col-md-6">
             <div className="form-group">     
                <span className="mr-4 pr-4">
                   <IntlMessages id="shopee.poswm" />
                </span>                                                                       
                <label className="pull-right" title="">
                  <Switch/>
                </label>
             </div>
           </div>
         )
      }})}
          </div>
 </div>