2

I'm trying to sort an array of objects by property using a select dropdown in react.

the data is defined in the parent container using the useState() hook, and I'm passing an onSortChange function down to the child select component, DataSelector. The data are displayed as a list by another component, DataList. Minimum example below to demonstrate (minus imports for brevity):

  1. Parent container:
const ParentContainer = () => {

    const [data, setData] = useState([]);

    useEffect( () => {
        populateData();
    }, []);

    function populateData() {
        const dave = {first_name: 'David', last_name: 'Taylor',
                    age: 25, salary: 25000};
        
        const bob = {first_name: 'Robert', last_name: 'Bush',
                    age: 31, salary: 30000};

        const sue = {first_name: 'Susan', last_name: 'Harman',
                    age: 22, salary: 28000};

        setData([dave, bob, sue]) 
    };

    const onSortChange = function(property) {
        setData(data.sort(propertySort(property)));
    };

    // sort by object property value (works for strings or )
    const propertySort = (prop) => {
        return function(a, b) {
            return (a[prop] < b[prop]) ? -1 : (a[prop] > b[prop]) ? 1 : 0;
        };
    };

    return (
        <>
            <DataSelector onSortChange={onSortChange} />
            <DataList data={data}/>
        </> 
    );
};

2: DataSelector component

const DataSelector = ({onSortChange}) => {

    const handleChange = function(event) {
        onSortChange(event.target.value);
    }

    return (
        <select onChange={handleChange}>
            <option value="first_name">Name</option>
            <option value="age">Age</option>
            <option value="salary">Salary</option>
        </select>
    );
};

export default DataSelector;

When I change the select option, handleChange fires correctly and if I console.log "data" in the parent container it correctly returns the array sorted by the value passed from handleChange. However, the DataList component doesn't re-render the list items.

Is there another step I need to take to have DataList re-render after data's setState function is called?

3 Answers 3

3

The sort() method sort items of an array in place. Besides returning the sorted array, it changes the positions of the elements in the original array.

So setData doesn't change the value. Use either of the below to solve your problem.

setData(data.slice().sort(propertySort(property)));

or

setData([...data.sort(propertySort(property))]);

Or

setData([...data].sort(propertySort(property)));
1

I think you need to use spread operator in order to correctly update state

Try like below:-

setData([...data.sort(propertySort(property))]);
1
  • 1
    yup that was it. answer by @Andrew below was also correct. I forgot you have to reassign to a new array. Thanks both!
    – oldbhoy
    May 14, 2021 at 13:43
1

I believe you need to set data to something new, and data.sort() is the same array. If you clone data then pass the sorted clone into setData I think it should work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.