¿Hay alguna forma en que pueda incluir FilterListContainer , FilterListScroll y FilterList del div envolvente en el map mismo?
Entonces, si hay algo para map , agregará los div principales. Si no, no lo hará.
<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>Podrá usar cortocircuitos de operadores lógicos aquí:
{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> )}Pero es posible que desee filtrar la lista, luego verifique si la lista filtrada tiene algún elemento en su lugar:
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> )}Mover mi comentario a una respuesta para agregar un fragmento
Podrías hacer el map antes de la return . Luego puede 'comprobar' si el map tiene algún contenido, si es así, utilícelo, de lo contrario, no renderice (o use respaldo)
Por favor, vea los comentarios en el código.
const { useState } = React; const Example = () => { // Demo data const [data, setData] = useState([ 'foo', 'bar' ]) // Filter + Mapping logic const mapped = data .filter(d => d !== 'foobar') .map(d => <li>{d.toUpperCase()}</li>); // Content based on map, use it, or render 'null' // The wrapped 'ul' is OP's FilterListContainer as an example const content = !mapped.length ? null : ( <div> <ul> {mapped} </ul> </div> ); // Render return content; } ReactDOM.render(<Example />, document.getElementById("react")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>