ReactJS - sort by ascending and descending - reactjs

Question

Im trying to reorder my results (JSON file) based on the title of my contacts.
The initial render is working fine, showing the results of the JSON file in the order they are in the JSON file.
When i change the select dropdown, i expect it to update the .map function (line 143) that is rendering out the results of the JSON.
What is happening is nothing. no change, no errors, just the select dropdown option changed to the selected value.
Not really sure why its not working, spent a few hours trying to debug, bet its something really simple I'm missing.
Any help would be greatly appreciated as I'm lost on what the problem is..
var getContactList = [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"job": "Manager",
"email": "Sincere#april.biz",
"phone": "1-770-736-8031 x56442",
"website": "http://www.hildegard.org",
"company": "Romaguera-Crona"
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"job": "CEO",
"email": "Shanna#melissa.tv",
"phone": "010-692-6593 x09125",
"website": "http://www.anastasia.net",
"company": "Deckow-Crist"
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"job": "Manager",
"email": "Nathan#yesenia.net",
"phone": "1-463-123-4447",
"website": "http://www.ramiro.info",
"company": "Romaguera-Jacobson"
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"job": "Store Clerk",
"email": "Julianne.OConner#kory.org",
"phone": "493-170-9623 x156",
"website": "http://www.kale.biz",
"company": "Robel-Corkery"
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"job": "Store Clerk",
"email": "Lucio_Hettinger#annie.ca",
"phone": "[phone]",
"website": "http://www.demarco.info",
"company": "Keebler LLC"
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"job": "Store Clerk",
"email": "Karley_Dach#jasper.info",
"phone": "1-477-935-8478 x6430",
"website": "http://www.ola.org",
"company": "Considine-Lockman"
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"job": "Manager",
"email": "Telly.Hoeger#billy.biz",
"phone": "210.067.6132",
"website": "http://www.elvis.io",
"company": "Johns Group"
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"job": "Store Clerk",
"email": "Sherwood#rosamond.me",
"phone": "586.493.6943 x140",
"website": "http://www.jacynthe.com",
"company": "Abernathy Group"
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"job": "Store Clerk",
"email": "Chaim_McDermott#dana.io",
"phone": "[phone] x41206",
"website": "http://www.conrad.com",
"company": "Yost and Sons"
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"job": "Store Clerk",
"email": "Rey.Padberg#karina.biz",
"phone": "024-648-3804",
"website": "http://www.ambrose.net",
"company": "Hoeger LLC"
}
];
const App = React.createClass({
getInitialState: function() {
return {
orderSelect: ''
};
},
change: function(e) {
this.setState({
orderSelect: e.target.value
});
},
render: function() {
var contactsData = this.props.items,
orderSelect = this.state.orderSelect.trim().toLowerCase();
if (String(orderSelect) == "asc") {
contactsData.sort(function(a, b) {
return a.name.toLowerCase() > b.name.toLowerCase();
})
} else if (String(orderSelect) == "desc") {
contactsData.sort(function(a, b) {
return a.name.toLowerCase() < b.name.toLowerCase();
})
} else if (String(orderSelect) == "submitted") {
contactsData = getContactsList
}
return(
<div>
<select onChange={this.change} value={this.state.orderSelect}>
<option value="" disabled=""> Sort by </option>
<option value="submitted"> Submitted Date </option>
<option value="asc"> A - Z </option>
<option value="desc"> Z - A </option>
</select>
{
contactsData.map(function(l, index) {
return (
<div key={index}>
{l.name}
</div>
)
})
}
</div>
);
}
});
ReactDOM.render(
<App items={getContactList} />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="app"></div>

Answer 1

Did you get your answer on this? This is my solution, I hope it helps.
getContactList
.sort(
({ job: prevOr }, { job: curOr }) => prevOr - curOr
)
.map((slider) => (
<SliderItem key={slider.order} slider={slider} />
))
I would create then a ternary, if the value is A - Z the this one, if is Z - A then this code but with curOr - prevOr.