Tengo mi objeto perfectamente actualizado pero no se renderiza en pantalla (función filteredData/handleOrder). Intenté usar la devolución de llamada pero tampoco rendericé.

¿Alguien sabe cuál es la posible solución para representar el objeto en la pantalla (filteredData)?

Aquí está el código con el que se actualiza el objeto:

 setFilteredData(filteredData.sort((a, b) => ( (sort === 'ASC') ? a[column].localeCompare(b[column]) : b[column].localeCompare(a[column]) )));

Código completo:

 import React, { useContext, useState } from 'react'; import { Button, Form } from 'react-bootstrap'; import MyContext from '../../context/MyContext'; import './style.css'; function FilterByNumericValues() { const { filteredData, order, functions: { setFilteredData, setOrder }, } = useContext(MyContext); function handleOrder(event) { event.preventDefault(); const { column, sort } = order; setFilteredData(filteredData.sort((a, b) => ( (sort === 'ASC') ? a[column].localeCompare(b[column]) : b[column].localeCompare(a[column]) ))); console.log(filteredData, 'filtered'); } return ( <Form> <Form.Group className="mb-3" controlId="order"> <Form.Check data-testid="column-sort-input-asc" type="radio" label="Ascendent" name="orderOption" value="ASC" onChange={ () => setOrder({ ...order, sort: 'ASC' }) } /> <Form.Check data-testid="column-sort-input-desc" type="radio" label="Descendent" name="orderOption" value="DESC" onChange={ () => setOrder({ ...order, sort: 'DESC' }) } /> <Form.Label>Order By</Form.Label> <Form.Select data-testid="column-sort" name="orderFilter" onChange={ ({ target }) => setOrder({ ...order, column: target.value }) } value={ order.column } > {[...columnsIn, ...columnsOut].map(({ name }, index) => ( <option key={ index } value={ name }>{ name }</option> ))} </Form.Select> <Button className="filter__order" data-testid="column-sort-button" onClick={ (event) => handleOrder(event) } type="submit" variant="warning" > Sort </Button> </Form.Group> </Form> ); } export default FilterByNumericValues;