How to pass a parameter from the component's state to sortBy?

Question

JavaScript

I use sortBy (lodash) to sort columns in a table. I can't figure out how to pass sortColumn from the component's state. Here is the code:

import React from 'react';
import OrderRow from './OrderRow';
import userInfo from './userInfo';
import './css/table.css';
import SearchBar from './SearchBar';
const sortBy = require('lodash/sortBy');

class Table extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      filterText: '',
      order: require('../data/orders.json'),
      user: require('../data/users.json'),
      company: require('../data/companies.json'),
      sortColumn: 'card_type'
    };
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
  }

  handleFilterTextChange(filterText) {
    this.setState({
      filterText: filterText
    });
  }

  render() {
    const filterText = this.state.filterText;
    const user = this.state.user;
    const company = this.state.company;
    const order = this.state.order;
    const sortColumn = this.state.sortColumn;

  //render table rows

        let rows = [];
        sortBy(order, c => c.sortColumn).forEach( order => {
          if (
            order.transaction_id.indexOf(filterText) === -1 &&
            order.total.indexOf(filterText) === -1 &&
            order.order_country.indexOf(filterText) === -1 &&
            order.card_type.indexOf(filterText) === -1 &&
            order.order_ip.indexOf(filterText) === -1 &&
            userInfo(order.user_id, user).indexOf(filterText) === -1) {
              return;
            }
            rows.push(
                  <OrderRow
                    user={user}
                    order={order}
                    company={company}
                    key={order.id}
                  />);
        });


  return (
    <table>

      <thead>
      <SearchBar
        filterText={this.state.filterText}
        onFilterTextChange={this.handleFilterTextChange}
        />
        <tr>
          <th>Transaction ID</th>
          <th>User Info</th>
          <th>Order Date</th>
          <th>Order Amount</th>
          <th>Card Number</th>
          <th>Card Type</th>
          <th>Location</th>
        </tr>
      </thead>

      <tbody>
        {rows}
      </tbody>

    </table>
  );
  }
};

export default Table

Answer 1

https://lodash.com/docs/4.17.11#sortBy
See example. The second argument can be passed not a function, but the name of the field by which sorting will occur