How to access return value of a method in classname field in ReactJS?

Question

I have following function outside the component

  function getSortByClass(sortByOption){
    if (this.state.sortBy === sortByOption) {
      return 'active';
    }
    else {
      return '';
    }
  }

I have a component which is returning following function.

  return Object.keys(sortByOptions).map(sortByOption => {
    let sortByOptionValue = sortByOptions[sortByOption];

    return <li className={} key={sortByOptionValue} 
 onClick={ handleSortByChange.bind(this, sortByOptionValue)}> {sortByOption} </li>;
  });

I want to know how I can access the return value of the getSortByClass function in <li> tag classname's value.

Here's the full component code.

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 '';
    }
  }

export class SearchBar extends React.Component{
    renderSortByOptions(){
      const that = this;

    function handleSortByChange(sortByOption){
      this.setState({ sortBy: sortByOption});
      }

      return Object.keys(sortByOptions).map(sortByOption => {
        let sortByOptionValue = sortByOptions[sortByOption];
        return <li className={} key={sortByOptionValue} onClick={ handleSortByChange.bind(this, 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;

What is outside the component? Different folder or just outside the component's scope? — Hemerson Carlin
– Hemerson Carlin, Commented Nov 30, 2017 at 16:53
Thanks for answering @mersocarlin. I have just added full code of the component — Ishan Patel
– Ishan Patel, Commented Nov 30, 2017 at 16:56
Can't you just move getSortByClass inside your component? this.state is undefined outside of it. — Hemerson Carlin
– Hemerson Carlin, Commented Nov 30, 2017 at 16:57
sure so if I move the getSortByClass inside component, how can I access that return value? — Ishan Patel
– Ishan Patel, Commented Nov 30, 2017 at 17:03
It's the same thing as what you have except you call this.handleSortByChange and you can bind it in the constructor. — Dakota
– Dakota, Commented Nov 30, 2017 at 17:04

Dakota · Accepted Answer · 2017-11-30 17:09:21Z

1

I don't know if what you are trying to do is possible but it's definately not a good idea. Just pass the part of state you are using as a parameter to the function.

  function getSortByClass(sortBy, sortByOption){
    if (sortBy === sortByOption) {
      return 'active';
    }
    else {
      return '';
    }
  }

then change your call to

    return <li className={} key={sortByOptionValue} onClick={ handleSortByChange(this.state.sortBy, sortByOptionValue)}> {sortByOption} </li>;

If the function doesn't have to be out of scope just put it in the component like @mersocarlin said.

Edit using setState:

  getSortByClass(sortByOption){
    if (this.state.sortBy === sortByOption) {
      this.setState({styleClass: 'active' });
    }
    else {
      this.setState({styleClass: '' });
    }
  }

edited Nov 30, 2017 at 17:09

answered Nov 30, 2017 at 16:59

Dakota

1,2748 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ishan Patel Over a year ago

I have just moved this function inside component. How I can now use return value of this function in classname field?

Dakota Over a year ago

You can have it call this.setState instead of returning and then use this.state.<whatever you call the property> in className

Collectives™ on Stack Overflow

How to access return value of a method in classname field in ReactJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related