¿Cuál es la mejor manera de agregar filtros opcionales basados en una condición? Por ejemplo, considere el siguiente fragmento de código:
<Menu> {itemGroupLevels.map(group) = [ this.props.itemTypes .filter((x) => x.group_level === group) .filter((x) => x.article_type_code !== "GRAL") {Permission.TEACHER?filter((x) => !x.article_type_code.includes('BACKPACK','LUNCH')):null} .map((value) => ( ])} </Menu>¿Cómo puedo agregar el último filtro dependiendo de una condición, como si el usuario tiene un permiso específico para evitar incluir MOCHILA y ALMUERZO solo si el usuario es un maestro?
{Permission.TEACHER?filter((x) => !x.article_type_code.includes('BACKPACK','LUNCH')):null}De lo contrario, no necesito agregar el filtro y solo dejar los dos filtros anteriores.
Gracias por tu ayuda
Agregue una condición if dentro del filtro... esto asegura que si el usuario no tiene los permisos adecuados, el filtro no devolverá ningún valor.
<Menu> {itemGroupLevels.map(group) = [ this.props.itemTypes .filter((x) => x.group_level === group) .filter((x) => x.article_type_code !== "GRAL") .filter((x) => { if (!Permission.TEACHER) return true return !x.article_type_code.includes('BACKPACK','LUNCH') }) .map((value) => ( ])} </Menu>En lugar de apilar llamadas filter() separadas, sería mejor mover la lógica comercial a una función separada y filtrar una vez. Esto también significa que evitará repetir los datos varias veces para filtrarlos.
const filterGroupItemTypes = (group, item) => { return ( item.group_level === group && item.article_type_code !== "GRAL" && // TODO: Implement (Permission.TEACHER ? ... : true) ); };Y luego en tu renderizador
this.props.itemTypes.filter((item) => filterGroupItemTypes(group, item)).map(...)