sorting array of objects alphabetically on selecting options from dropdown in react app

Question

I am trying ro sort according to Title and Director but only second option from dropdown works always. Here is my code below. On selecting only second option that may be either asc or desc the sorting is performed

class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: data.movies, sort_term: '',
    };
    this.onSorting = this.onSorting.bind(this);
  }
  onSorting(e) {
    let term = 'Title';
    let option = e.target.value;
    let sortedList = [...this.state.movies].sort((a, b) => {
  return (option == 'asc' ? (a[term] <= b[term] ? -1 : 1) :
    (a[term] >= b[term] ? -1 : 1))
});
    this.setState({ sort_term: term });
    this.setState({ movies: sortedList });
  }

  render() {
    return (
      <div>
        <Hello sort_term={this.state.sort_term}
          onSorting={this.onSorting} />
        <br />
        <Table movies={this.state.movies} />
      </div>
    );
  }
} 

Hello.js

class Hello extends Component {
  render() {
    const { sort_term, onSorting } = this.props;
    return (
      <div className="header">
        Database
        <ul className="navLeft">
          <li >
            <form >
              <select value={sort_term}
                onChange={onSorting}
                className="searchBar">
                <option value="desc">Sort Title(Z - A)</option>
                <option value="asc">Sort Title(A - Z)</option>
              </select>
            </form>
          </li>
        </ul>
      </div>
    );
  }
}

Answer 1

I will suggest you to define "OnSorting" function like this

class App extends Component {
    constructor() {
        super();
        this.state = {
            movies: data.movies,
            sort_term: '',
        };
    }

    onSorting = (e) => {
        let term = 'Title';
        let option = e.target.value;
        let sortedList = [...this.state.movies].sort((a, b) => {
        return (option == 'asc_Title' ? (a[term] >= b[term] ? -1 : 1) :
            (a[term] <= b[term] ? -1 : 1))
        });
        this.setState({ sort_term: term });
        this.setState({ movies: sortedList });
    }

    render() {
        return (
        <div>
            <Hello sort_term={this.state.sort_term}
            onSorting={this.onSorting} />
            <br />
            <Table movies={this.state.movies} />
        </div>
        );
    }
} 

// Hello.js

class Hello extends Component {
    render() {
        const { sort_term, onSorting } = this.props;
        return (
            <div className="header">
            Database
            <ul className="navLeft">
                <li >
                <form >
                    <select
                    onChange={onSorting}
                    className="searchBar">
                    <option value="desc">Sort Title(Z - A)</option>
                    <option value="asc">Sort Title(A - Z)</option>
                    </select>
                </form>
                </li>
            </ul>
            </div>
        );
    }
}