score:0

there are a couple of things wrong with your code, i put comments in your code where i changed it:

//put magic strings in constants
const sort_by_id = 'sort_by_id';
const sort_by_name = 'sort_by_name';
class app extends react.component {
  state = {
    assetsarr: [
      { id: 2, name: 'a' },
      { id: 1, name: 'b' },
    ],
    clickedassets: [
      { id: 2, name: 'a' },
      { id: 1, name: 'b' },
    ],
  };
  sortedassets(value) {
    //not using magic strings but constants
    if (value === sort_by_id) {
      //sort mutates the array so will sort copy of assetsarr
      let sortbyassetid = [...this.state.assetsarr].sort(
        (a, b) => {
          //id is a number so can use a.id-b.id
          return a.id - b.id;
        }
      );
      this.setstate({
        ...this.state,
        clickedassets: sortbyassetid,
      });
    } else if (value === sort_by_name) {
      //still not mutating state
      let sortbyassetname = [...this.state.assetsarr].sort(
        (a, b) => {
          //name is string, use localecompare
          return a.name.localecompare(b.name);
        }
      );
      this.setstate({
        ...this.state,
        clickedassets: sortbyassetname,
      });
    }
  }
  render() {
    return (
      <div>
        {/* no reason to use id make select a child of label */}
        <label>
          sort assets by:
          <select
            name="sorting"
            onchange={(e) =>
              //passing e.target.value
              this.sortedassets(e.target.value)
            }
          >
            <option value={sort_by_name}>name</option>
            <option value={sort_by_id}>id</option>
          </select>
        </label>
        <pre>
          {json.stringify(this.state.clickedassets)}
        </pre>
      </div>
    );
  }
}
reactdom.render(<app />, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>


Related Query

More Query from same tag