JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

Babel + JSX

function App({ items, sortOptions, sortFunctions }) {
  const [ sortIndex, setSortIndex ] = React.useState(0);

  const sortedItems = React.useMemo(() => {
    const { key, type } = sortOptions[sortIndex];
    const f = sortFunctions[type];
    return [...items].sort((a, b) => f(a[key], b[key]));
  }, [ items, sortIndex, sortFunctions ]);

  const onSortChange = e => setSortIndex(+e.target.value);

  return (
    <div>
      <div>
        sort by:
        <select value={sortIndex} onChange={onSortChange}>
          {sortOptions.map((n, i) => <option value={i}>{n.key}</option>)}
        </select>
      </div>
      <ul>
        {sortedItems.map(n => (
          <li>{JSON.stringify(n)}</li>
        ))}
      </ul>
    </div>
  );
}

const PEOPLE = [
  { id: 1, name: 'Михаил', age: 34 },
  { id: 2, name:  'Кевин', age: 51 },
  { id: 3, name: 'Джулия', age: 24 },
  { id: 4, name:   'олег', age:  6 },
  { id: 5, name:   'Пётр', age: 86 },
  { id: 6, name:   'Анна', age: 33 },
  { id: 7, name: 'Энтони', age: 17 },
  { id: 8, name: 'аманда', age: 28 },
  { id: 9, name: 'Ричард', age: 35 },
];

const SORT_OPTIONS = [
  { key:   'id', type: 'number' },
  { key: 'name', type: 'string' },
  { key:  'age', type: 'number' },
];

const SORT_FUNCTIONS = {
  number: (a, b) => a - b,
  string: (a, b) => a.localeCompare(b),
};

ReactDOM.render(
  <App
    items={PEOPLE}
    sortOptions={SORT_OPTIONS}
    sortFunctions={SORT_FUNCTIONS}
  />,
  document.getElementById('app')
);