How to pass function with argument in classname field in React? - reactjs

Question

I have following component in my React Project. What I want to do is to Add a className attribute to the <li> element. Set it equal to the return value of the getSortByClass() method and pass in sortByOptionValue as the argument.
import React from 'react';
import './SearchBar.css';
const sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'Most Reviewed': 'review_count'
}
function getSortByClass(sortByOption){
if (this.state.sortBy === sortByOption) {
return 'active';
}
else {
return '';
}
}
function handleSortByChange(sortByOption){
this.setState({
sortBy: sortByOption
});
}
export class SearchBar extends React.Component{
renderSortByOptions(){
return Object.keys(sortByOptions).map(sortByOption => {
let sortByOptionValue = sortByOptions[sortByOption];
return <li className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}> {sortByOption} </li>;
});
}
constructor(props) {
super(props);
this.state = {
term: '',
location: '',
sortBy: 'best_match',
};
}
render(){
return (
<div className="SearchBar">
<div className="SearchBar-sort-options">
<ul>
{this.renderSortByOptions()}
</ul>
</div>
<div className="SearchBar-fields">
<input placeholder="Search Businesses" />
<input placeholder="Where?" />
</div>
<div className="SearchBar-submit">
<a>Lets Go</a>
</div>
</div>
);
}
}
export default SearchBar;
I am getting error: TypeError: Cannot read property 'state' of undefined after setting the classname field.

Answer 1

....
function getSortByClass(sortBy, sortByOption){
if (sortBy === sortByOption) {
return 'active';
}
else {
return '';
}
}
export class SearchBar extends React.Component{
handleSortByChange = (sortByOption) => this.setState({ sortBy: sortByOption});
renderSortByOptions(){
const that = this;
return Object.keys(sortByOptions).map(sortByOption => {
let sortByOptionValue = sortByOptions[sortByOption];
return <li className={getSortByClass(that.state.sortBy, sortByOptionValue)} key={sortByOptionValue}> {sortByOption} </li>;
});
}
....
Pass your state to the getSortByClass method as it doesn't have access to this because it is written outside the class. Also write handleSortByChange inside your class as it is accessing setState from this.
Also you can beautify the code as :
renderSortByOptions(){
const that = this;
return Object.keys(sortByOptions).map(sortByOption => {
let sortByOptionValue = sortByOptions[sortByOption];
return (
<li className={that.state.sortBy === sortOption ? 'active' : ''}
key={sortByOptionValue}
>
{sortByOption}
</li>
);
});
}