Adding parent div's inside .map

April 28, 2022

Is there any way I can include the wrapping div’s FilterListContainer, FilterListScroll and FilterList in the map itself?

So if there is something to map, it will add the parent div’s. If not it wont.

 <FilterListContainer>
      <FilterListScroll>
           <FilterList>
              {Object.keys(this.props.body_search_filter)
                .map((k) => (
                  <SidebarFilter
                    key={k}
                    type={k}
                    filter={this.props.body_search_filter[k]}
                    handleChange={this.handleFilterChange}
                  />
                ))
                .filter(
                  (i) =>
                    i.props.filter.list.length > 0 &&
                    ((!i.props.filter.optional && !i.props.filter.hidden) ||
                      (i.props.filter.list.length !== 1 &&
                        !i.props.filter.list[0].disabled))
           </FilterList>
      </FilterListScroll>
 </FilterListContainer>

>Solution :

You’ll be able to use short-circuiting of logical operators here:

{Object.keys(this.props.body_search_filter).length && (
  <FilterListContainer>
      <FilterListScroll>
           <FilterList>
              {Object.keys(this.props.body_search_filter)
                .map((k) => (
                  <SidebarFilter
                    key={k}
                    type={k}
                    filter={this.props.body_search_filter[k]}
                    handleChange={this.handleFilterChange}
                  />
                ))
                .filter(
                  (i) =>
                    i.props.filter.list.length > 0 &&
                    ((!i.props.filter.optional && !i.props.filter.hidden) ||
                      (i.props.filter.list.length !== 1 &&
                        !i.props.filter.list[0].disabled))
           </FilterList>
      </FilterListScroll>
  </FilterListContainer>
)}

But you might want to filter the list, then check if the filtered list has any elements instead:

const filtered = Object.keys(this.props.body_search_filter).filter((k) => {
    const f = this.props.body_search_filter[k];

    return f.list.length > 0 && 
        ((!f.optional && !f.hidden) ||
            (f.list.length !== 1 && !f.list[0].disabled))
});

// ...

// then use 'filtered' instead

{filtered.length && (
  <FilterListContainer>
      <FilterListScroll>
           <FilterList>
              {filtered.map((k) => (
                  <SidebarFilter
                    key={k}
                    type={k}
                    filter={this.props.body_search_filter[k]}
                    handleChange={this.handleFilterChange}
                  />
              ))}
           </FilterList>
      </FilterListScroll>
  </FilterListContainer>
)}