How to skip null while map? JSX

Question

I'm new with ReactJs/Redux and JSX. I have a dynamical table with dynamic information in it.

I have problem with map. I 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 is the full picture how it looks in action: image here

When I select in the filter other condition where there is somewhere null in the array it stop and show me error:

list.js?6d8a:153 Uncaught (in promise) TypeError: Cannot read property 'map' of null
    at eval (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:8972:1), <anonymous>:238:35)
    at Array.map (native)
    at ListsAccounting.render (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:8972:1), <anonymous>:222:26)
    at eval (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:796:21)
    at measureLifeCyclePerf (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:795:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:822:32)
    at ReactCompositeComponentWrapper._updateRenderedComponent (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:746:36)
    at ReactCompositeComponentWrapper._performComponentUpdate (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:724:10)
    at ReactCompositeComponentWrapper.updateComponent (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:645:12)

Here is error in action: image here

How to skip null values in the JSX while mapping and get all the elements even there is empty indexes in some places?

​

Answer 1

You can also use Array#filter to get rid of every entry where text prop is null.

data.filter(v => v.text !== null).map((name, textIndex) => { ...