javascript - Return multiple <td> from map without wrapping them within an enclosed tag -


i sort of stuck in case. know solve kind of errors have wrap them inside container or something. in case can't. please let me know if there solution this.

<div classname="table-responsive col-lg-12">   <table classname="table table-bordered table-hover">     <thead>       <tr classname="active">         <th classname="width10">name</th>         <th classname="width10">number</th>         <th classname="width12">email</th>         <th classname="width10">user handle</th>         <th classname="width12">address</th>         <th classname="width10">device imei</th>         <th classname="width10">mapped date</th>       </tr>     </thead>     { this.state.userdetails.map((user,i)=>{         return(           <tbody key={i}>             <tr>               <td>{user.fn ? user.fn : "-"}</td>               <td>{user.mob ? user.mob : "-"}</td>               <td>{user.eml ? user.eml : "na"}</td>               <td>{user.uh ? user.uh : "-"}</td>               <td>{user.add ? user.add : "-"}</td>             {this.state.devicedetails.map((dev,i)=>{               if(user.idx == dev.uid){                 return(                   <td>{dev.imei ? dev.imei : "-"}</td>                   <td>{dev.dm ? dev.dm : "-"}</td>                 )               }             })}             </tr>           </tbody>         )       })     }   </table> </div>

above table want render. there 2 arrays have show table content. have perform mapping twice both different arrays. when map this.state.userdetails got error. if wrap inside <div> or <tr> both content placed in device imei <th>. how can solve this? appreciated.. :)

wrapping content jsx sugar should work. don't need flatten resulting array, react you. see jsx docs: 

  {this.state.devicedetails.map((dev,i)=>{           if(user.idx == dev.uid){             return([               <td>{dev.imei ? dev.imei : "-"}</td>,               <td>{dev.dm ? dev.dm : "-"}</td>             ])           }         })}

see this issue raised on react github page.


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more