Sort data in state after getting json from api in React Redux

Question

I have a question about sorting data in React. I have searched for a solution but I can't understand, how to do it. I have to sort the 'payments' by id DESC or by the date DESC. How could I do that? I have the code with my list of payments (Payments.js) and the component (Payment.js). Thanks

Payments.js

class Payments extends Component {
    componentDidMount() {
        this.props.getAllPayments();
    }
    render() {
        const { payments } = this.props.payments;

        return(
            <div className='dashboard container text-center'>
                <div className='row entry'>
                <div className='col-sm-1'>
                    <span><strong>ID</strong></span>
                </div>
                <div className='col-sm-2'>
                    <span><strong>Date</strong></span>
                </div>
                <div className='col-sm-4'>
                    <span><strong>Name</strong></span>
                </div>
                <div className='col-sm-5'>
                    <span><strong>Lastname</strong></span>
                </div>
                </div>
                { payments.map(payment => {
                    return (

                        <Payment payment={payment} key={payment.id} />
                    )
                })}
            </div>
        )

    }
}



Payments.propTypes = {
    getAllPayments: PropTypes.func.isRequired,
    payments: PropTypes.object.isRequired
};


const mapStateToProps = state => {
    return {
        payments: state.payment

    }
}

export default connect(mapStateToProps, {getAllPayments})(Payments);

Payment.js

class Payment extends Component{

    componentDidMount() {
        this.props.getAllUsers();
    }

    render() {

        const { users } = this.props.users;
        const { payment } = this.props;
        return (

            <div className='row entry'>
                <div className='col-sm-1'>
                    <span>{payment.id}</span>
                </div>
                <div className='col-sm-2'>
                    <span >{payment.date}</span>
                </div>
                <div className='col-sm-4'>

                    <span>
                        { users.map(user => {
                        return (
                            (payment.userId === user.id)&&user.name

                        )
                    })}
                    </span>
                </div>
                <div className='col-sm-5'>
                    <span>
                        { users.map(user => {
                         return (
                             (payment.userId === user.id)&&user.lastname

                         )
                     })}
                    </span>
                </div>
            </div>
        )
    }


}


Payment.propTypes = {
    users: PropTypes.object.isRequired
};


const mapStateToProps = state => {
    return {
        users: state.user

    }
}


export default connect(
    mapStateToProps, {  getAllUsers }
)(Payment);

You can sort your data in redux.js.org/basics/reducers. Check this to sort by date - stackoverflow.com/questions/41058681/… — Akhilesh
– Akhilesh, Commented May 28, 2020 at 16:48

Alan Maldonado · Accepted Answer · 2020-05-28 17:06:38Z

0

You can sort the information before it goes into your store by modifying your Payments Reducer before returning the new state.

If your IDs are incremental numbers the use a sort() function to sort by ID Number.

Note: if your IDs are randomly generated, then it would be almost imposible to sort them by that value.

Below is an example of a sort function:

arr.sort((a,b) => {
   const keyA = a.id,
   const keyB = b.id;
   // Compare the 2 ids
   if (keyA < keyB) return -1;
   if (keyA > keyB) return 1;
   return 0;
});

If you want to sort them by date, then it could be something like this:

arr.sort((a, b) => {
   var keyA = new Date(a.date),
   keyB = new Date(b.date);
   // Compare the 2 dates
   if (keyA < keyB) return -1;
   if (keyA > keyB) return 1;
   return 0;
 });

answered May 28, 2020 at 17:06

Alan Maldonado

1332 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sort data in state after getting json from api in React Redux

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related