Sorting arrays using React js

Question

I am attempting to display array values sorted by OrderId field. Here is my code:

var fields = 
    [{value: "Claims", OrderId:3 },
     {value: "Requests", OrderId:1 },
     {value: "Access", OrderId: 2}]

var listElements = fields.sort('OrderId', function(n){ return Math.sin(n) } )
    .map( function(field) {
        return React.createElement('li', {},
            React.createElement('h2',{}, field.value)

        )
    })
var rootElement =
    React.createElement('div', {},
        React.createElement('ul', {}, listElements)

    )

ReactDOM.render(rootElement, document.getElementById('container'));

This does not give me errors and displays the values in a desired format but unsorted... How can I sort in Reactjs world?

I love lodash for this kind of thing. lodash.com/docs/4.17.4#sortBy — Joao
– Joao, Commented Jan 26, 2017 at 23:59
You have doublequotes in OrderId:3". I take it si typo that is not present in the code. — luboskrnac
– luboskrnac, Commented Jan 27, 2017 at 1:59
sorry, these were all typos. the actual array is more complicated so I made it simple and made some typos along the way — Coding Duchess
– Coding Duchess, Commented Jan 27, 2017 at 13:45

Ayush Sharma · Accepted Answer · 2017-01-27 08:29:53Z

6

First of all check your field name it should be OrderId for all the three, in question it is not and remove any extra quotes as well.

Then for sorting purpose, i dont know about sortBy method, you can use sort method easily, check out this example code below, and let me know if it will work for you -

JS fiddle link - https://jsfiddle.net/4kq4vbdw/

var fields = 
 [{value: "Claims", OrderId:3 },
 {value: "Requests", OrderId:1 },
 {value: "Access", OrderId: 2}];

fields.sort(function(a,b){
 return parseInt(a.OrderId)  - parseInt(b.OrderId);
})
 console.log(fields);

answered Jan 27, 2017 at 8:29

Ayush Sharma

2,11718 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Sorting arrays using React js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related