Warning: Cannot update a component (`SearchBar`) while rendering a different component (`RenderSortByOptions`)

Question

SearchBar.js

import React, { useState } from "react";
import "./SearchBar.css";

export default function SearchBar(props) {
const [term, setTerm] = useState("");
const [location, setLocation] = useState("");
const [sortBy, setSortBy] = useState("best_match");

const sortByOptions = {
    "Best Match": "best_match",
    "Highest Rated": "rating",
    "Most Reviewed": "review_count",
};

function handleTermChange(event) {
  setTerm(event.target.value);
}

function handleLocationChange(event) {
  setLocation(event.target.value);
}

function handleSearch(event) {
    props.searchYelp(term, location, sortBy);

    event.preventDefault();
}

function RenderSortByOptions() {
    function getSortByClass(sortByOption) {
        return sortBy === sortByOption ? "active" : "";
}

function handleSortByChange(sortByOption) {
    setSortBy(sortByOption);
}

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

    return (
        <li
        key={sortByOptionValue}
        className={getSortByClass(sortByOptionValue)}
        onClick={handleSortByChange(sortByOptionValue)}
        >
        {sortByOption}
        </li>
    );
  });
}

return (
    <div className="SearchBar">
     <div className="SearchBar-sort-options">
        <ul>
           <RenderSortByOptions />
         </ul>
    </div>
    <div className="SearchBar-fields">
        <input onChange={handleTermChange} placeholder="Search Businesses" />
        <input onChange={handleLocationChange} placeholder="Where?" />
    </div>
    <div className="SearchBar-submit">
        <a href="/#" onClick={handleSearch}>
          Search
        </a>
    </div>
  </div>
);
}

This code is giving this error-

Warning: Cannot update a component (`SearchBar`) while rendering a 
different component (`RenderSortByOptions`). To locate the bad 
setState() call inside `RenderSortByOptions`, follow the stack trace as 
described in https://reactjs.org/link/setstate-in-render
at RenderSortByOptions
at ul
at div
at div
at SearchBar (http://localhost:3000/static/js/bundle.js:396:74)
at div
at App (http://localhost:3000/static/js/bundle.js:34:102)
printWarning @ react-dom.development.js:86

At first, I thought that due to rerendering of RenderSortOptions after the updation of sortBy may be the cause of the problem so I tried to include it in separate file and then include it in the app but the error remained same only now instead of SearchBar.js, It was showing App.js.

After googling this error I have seen some StackOverflow solutions and they all used useEffect to handle this error, I am not getting a clear picture of how to use useEffect.

Answer 1

Your onclick is onClick={handleSortByChange(sortByOptionValue)} which means it will invoke immediately on render and give you the error. To remove the error you're receiving, you need to use an arrow fn on the onClick

<li
  key={sortByOptionValue}
  className={getSortByClass(sortByOptionValue)}
  // Added arrow function here
  onClick={() => handleSortByChange(sortByOptionValue)}
>
  {sortByOption}
</li>