0
85
VistasMostrar el número total de filtros seleccionados matriz de elementos en React
Tengo el siguiente problema. En la matriz widgetFilters (longitud === 3) quiero mostrar el número de elementos seleccionados en el encabezado del filtro.
const [selectedFilters, setSelectedFilters] = useState([]); 
En el fragmento de código a continuación, mapeo a través de toda la matriz de widgetFilter y hago 3 acordeones con el título, el tipo de nombre Nombre del filtro y luego las opciones que contiene el filtro, por ejemplo
<Stack> {widgetFilters.map((filter) => ( <FilterWidgetAccordion key={filter.id} headline={filter.typeName} list={filter.options} selectedFilters={selectedFilters} setSelectedFilters={setSelectedFilters} /> ))} </Stack> 
FilterWidgetAccordion.js
<Fragment> <Accordion> <AccordionSummary aria-controls="panel1a-content" id="panel1a-header"> <StyledTypography>{headline}</StyledTypography> </AccordionSummary> <AccordionDetails> {list?.map((filterItem) => { return( <Button onClick={() => { const list = [...selectedFilters]; const index = list.indexOf(filterItem); index === -1 ? list.push(filterItem) : list.splice(index, 1); setSelectedFilters(list); }} key={filterItem.value} > {filterItem.value} </Button> )})} </AccordionDetails> </Accordion> </Fragment>Quiero junto al título, por ejemplo, "Categoría de producto" para agregar el número de botones seleccionados. Mire la imagen a continuación.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Debe separar los filtros para cada widget y luego mostrar la longitud de los filtros en el título, aquí hay un ejemplo:
const updateWidgetFilters=(myFilters, widgetTypeId)=>{ setSelectedFilters((prevSelectedFilters)=>{ const selectedElement = prevSelectedFilters?.find(({typeId})=>typeId===widgetTypeId); if(selectedElement) { selectedElement.filters= myFilters; return [...prevSelectedFilters] } return [...prevSelectedFilters, {typeId: widgetTypeId, filters: myFilters}]; }); }...
<Stack> {widgetFilters.map((filter) => ( <FilterWidgetAccordion key={filter.id} headline={ filter.typeName+' ' +(selectedFilters?.find(({typeId})=>typeId===filter.typeId)?.filters?.length || 0) } list={filter.options} selectedFilters={selectedFilters?.find(({widgetId})=>typeId===filter.typeId)?.filters || []} setSelectedFilters={(filters)=>updateWidgetFilters(filters, filter.typeId)} /> ))} </Stack>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta