N
N
Ninja Mate2016-03-31 09:31:25
JavaScript
Ninja Mate, 2016-03-31 09:31:25

How can I organize sorting for React elements?

What are the ways to sort react elements that are in an array?
For the user, it looks like a list in which each line is a button, when clicked, a modal appears.
There was a need to make a button that will sort the records located in

var ActNonPat = [];
that.setState({rowsActNonPat : ActNonPat})

//Это элемент кнопка-модал
class ActivitiesModal extends Component {
 ...
    render() {
        return (
            <div>
                <Button bsSize="xsmall" onClick={()=> this.setState({showModal: !this.state.showModal})} block>
                    {this.props.datetime} | {this.props.user_loc}
                </Button>

                <Modal ...>
                        {this.props.modalActiv}
                </Modal>
      

class RecordRowNonPat extends Component {

        var ActNonPat = []; // Как произвести сортировку по {res.nps_user_loc} и {res.nps_datetime}?
        var that = this;

        jQuery.post(
          ...//Получаем записи из БД 
   
            $.each( resp, function( i, res )//Делаем из записей элементы
            {
                ActNonPat.push(
                    <ActivitiesModal
                        datetime={res.nps_datetime} //используются как 
                        user_loc={res.nps_user_loc}//надписи на кнопке
                        modalActiv={
                            <NonPatientSer
                                nps_id ={ res.nps_id } // показываются в модальном окне
                                nps_datetime ={ res.nps_datetime }
                                nps_user_id ={ res.nps_user_id }
                                nps_user_loc ={ res.nps_user_loc }
    
            //потом готовый аррей засовываем в стейт
            that.setState({rowsActNonPat : ActNonPat})

 render() {

             {this.state.rowsActNonPat} //готовый список элементов-кнопок

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Max Kamashev, 2016-03-31
@victorzadorozhnyy

1. Sort the data
2. Form a ReactElement array from the sorted data
3. The elements themselves will render correctly..
4. PROFIT :-)
PS Perhaps you had some special case that I did not notice, please specify

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question