Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

66
Vistas
Render React Component stored in a state containing array of objects

When I apply the filters on the table I want to change the Icon color of the filter Icon, but the icon color is not changing somehow.

enter image description here

This is my component,

const Table = () => {

    const [tableFilters, setTableFilters = useState({name: []})


    let tableColumns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            filters: [],
            filterDropdownVisible: false,
            filterIcon: (filtered: boolean) => {
                return (
                    <TableFilterIcon filterColumnData={filters.name.data} />
                )
            },
        },
    ]

    const [columns, setColumns] = useState(tableColumns)


    return (
        <>
            <CommonTable
                data={data}
                columns={tableColumns}
            />
        </>
    )
}

export default Table

In TableFilterIcon component I am rendering non-colored and colored icon based on the selected filters, if filters are applied then I am showing color icon. But the TableFilterIcon component is not rendering when I apply the filters that's why Icon color is not changing. Maybe the TableFilterIcon component is in the object of columns that's why ??

Note: if I don't store the columns in state and directly pass the columns to the CommonTable component then it works.

Can anyone help me with this ?? Also, I am using Ant Design Framework for UI components.

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.