gistfile1.txt

import React from 'react';
import { render } from 'react-dom';
import * as _ from "lodash";
import './style.css'


class App extends React.Component {
  state = {
    geni: [
      { id: 10, a: 'Beta', b: 811 },
      { id: 11, a: 'Alpha', b: 824 },
      { id: 12, a: 'Cthe', b: 294 }]
  }
  render() {

    return (
      <Main data={this.state.geni}/>
    );
  }
}

class Main extends React.Component {
  state = {
    geni: this.props.data
  }
  someCounter = 10

  handleClick = (e, x) => {
    const { geni } = this.state;
    var i = geni.findIndex(e => e.id === x.id);
    if (x.b < 200) {
      geni[i].b = geni[i].temp;
      geni[i].temp = 0;
      // Get the value form the .temp key
    }
    else {
      geni[i].temp = geni[i].b;
      // create temp key to store the orignal order
      geni[i].b = this.someCounter++;
    }
    var sortedObjs = _.sortBy(geni, 'b');
    this.setState({ geni: sortedObjs });
  };

  render() {

    return (
      <span>
        {this.state.geni.map((x, index) => {
          return (
            <div
              key={index}
              onClick={e => this.handleClick(e, x)}
              className={x.temp > 1 && 'selectedItem'}>
              {x.a}, {x.id}, order: {x.b}
            </div>
          );
        })}
      </span>
    );
  }
}


render(<App />, document.getElementById('root'));