Ravenous Project Part 3

At the end of the code after the map we are assigning an array to the key and also onClick event we are passing a array as a parameter so how the state is changing its value i cant figure out so can someone explain how therenderSortByOption function is working ?

class SearchBar extends React.Component {

constructor(props) {

super(props);

this.state = {

  term: '',

  location: '',

  sortBy: 'best_match'

};

this.handleTermChange = this.handleTermChange.bind(this);

this.handleLocationChange = this.handleLocationChange.bind(this);

this.handleSearch = this.handleSearch.bind(this);



this.sortByOptions = {

  'Best Match': 'best_match',

  'Highest Rated': 'rating',

  'Most Reviewed': 'review_count'

};

}

getSortByClass(sortByOption) {

if (this.state.sortBy === sortByOption) {

  return 'active';

}

return '';

}

handleSortByChange(sortByOption) {

this.setState({sortBy: sortByOption});

}

handleTermChange(event) {

this.setState({term: event.target.value});

}

renderSortByOptions() {

return Object.keys(this.sortByOptions).map(sortByOption => {

  let sortByOptionValue = this.sortByOptions[sortByOption];

  return (<li className={this.getSortByClass(sortByOptionValue)}

              **key={sortByOptionValue}**

              **onClick={this.handleSortByChange.bind(this, sortByOptionValue)}>**

            {sortByOption}

         </li>);

});

}