javascript - How to skip null while map? JSX -


i'm new reactjs/redux , jsx. have dynamical table dynamic information in it.

i have problem map. have 2 levels of map:

<tbody>   {     data.map(row => (       <tr key={`${row.type}`}>         <td>           <h5>{row.type}</h5>         </td>         <td>           {             row.text.map((name, indextext) => (                <span key={row.text[indextext]} classname="margin-right-10">                  <link                    key={name}                    role="button"                    onclick={ () => this.getdata(                    this.state.le_id,                    row.text[indextext][1],                    row.type,                    this.state.year,                   )}>                    {row.text[indextext][0]}                  </link>                </span >             ))           }         </td>           <td>               <link classname="btn btn-info btn-sm"                     to={`/company/insurances/all-providers/${row.type}/${this.state.le_id}`}               >               {locales('create')}               </link>           </td>        </tr>     ))   } </tbody>

here full picture how looks in action: image here

when select in filter other condition there somewhere null in array stop , show me error: 

list.js?6d8a:153 uncaught (in promise) typeerror: cannot read property 'map' of null     @ eval (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:8972:1), <anonymous>:238:35)     @ array.map (native)     @ listsaccounting.render (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:8972:1), <anonymous>:222:26)     @ eval (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:796:21)     @ measurelifecycleperf (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:75:12)     @ reactcompositecomponentwrapper._rendervalidatedcomponentwithoutownerorcontext (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:795:25)     @ reactcompositecomponentwrapper._rendervalidatedcomponent (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:822:32)     @ reactcompositecomponentwrapper._updaterenderedcomponent (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:746:36)     @ reactcompositecomponentwrapper._performcomponentupdate (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:724:10)     @ reactcompositecomponentwrapper.updatecomponent (eval @ <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:645:12)

here error in action: image here

how skip null values in jsx while mapping , elements there empty indexes in places?

​

try this

row.text && row.text.map((name, indextext) ...

Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more