Ребят, снова, прошу помощи. Напомню, что совсем новичок в react

и делаю приложение вывода карточек билетов как на aviasales (делаю их тестовое для интереса)
На данный момент имею такой код компонента:

import React, {Component} from 'react';
import logo from '../img/Logo.png';
import data from '../tickets.json'

class Ticket extends Component {
render() {
return (
<div>
{ data && data.tickets && data.tickets.map((ticket,i) =>
<div className="ticketCard" key={i}>
<div className="row">
<img src={logo} alt="logo"/>
<button className="buttonCard">Купить<br /> за {ticket.price} Р </button>
</div>
<div className="row1">
<p className="dpTime">{ticket.departure_time}</p>
<p className="destin">{ticket.origin}, {ticket.origin_name}</p>
<p className="dateTime">9 окт 2016, Пт</p>
</div>
<div className="row2">
<p className="dpTime">{ticket.arrival_time}</p>
<p className="destin">{ticket.destination}, {ticket.destination_name}</p>
<p className="dateTime">9 окт 2016, Пт</p>
</div>
</div>
)}
</div>
);
}
}

export default Ticket;

Есть карточки ticketCard, которые берут данные из json файла. Теперь я хочу, чтобы эти карточки сортировались по цене ticket.price, но без всяких нажатиай, а просто при рендере сразу сортировались.
Идеи такие, думаю нужно убрать data. map, переделать. На сколько я понимаю нужно обозначить const, новый массив, пройтись по нему map и применить метод sort, чтобы составить новый массив уже отсортированный. Я мыслю в правильном направлении?

Читаю, что юзают lodash функцию sortBy. Типа sortBy(field) { this.setState({ tickets: _.sortBy(this.state.tickets, field) }); }, и в рендере var ticketList = data.tickets.map( (person, index) => { Типа того надо делать?