如何使用 react 分别实现/渲染两个过滤器

Question

How can i implement these two filter with postRes in table row? postRes is json api response. includeKeyword & searchVolume is State hook. i don't want to implement filters if states are empty. i appreciate your help in advance

  let includeKeywordResults = !includeKeyword  ? postRes : postRes.filter(data =>
    data.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase())) 
  

 let searchVolumeResults = !searchVolume ? postRes : postRes.filter(data => 
  data.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume) )

Return

        <div className="container table-responsive py-5"> 
      <table className="table table-bordered table-hover" id="table-to-xls">
        <thead className="text-white bg-dark">
          <tr>
            <th scope="col">Keyword</th>
            <th scope="col">Search Volume</th>
            <th scope="col">Competition</th>
            <th scope="col">CPC</th>
          </tr>
        </thead>
        <tbody>
    {includeKeywordResults !== undefined ? includeKeywordResults.map((data, index) => (
          <tr key={index}>
            <td>{data.text}</td>
            <td>{data.keyword_idea_metrics.avg_monthly_searches}</td>
            <td>{data.keyword_idea_metrics.competition}</td>
            <td>{data.keyword_idea_metrics.low_top_of_page_bid_micros}</td>
          </tr>
  )) : null}
  
  </tbody>
      </table>
      </div>
      </div>
    }

Answer 1

Create a filter function with your various criteria and pass it to the Array.filter prototype. Function will look like something like that (not tested):

const filterFunction = (a) => {
   if (!includeKeyword && !searchVolume){
      return true
   } else if (includeKeyword && !searchVolume){
      return a.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase())) 
   } else if (!includeKeyword && searchVolume){
      return  a.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume)
   } else {
      a.text.toLowerCase().includes(includeKeyword.toLocaleLowerCase())) && a.keyword_idea_metrics.avg_monthly_searches > parseInt(searchVolume) 
   }
}

and pass it before your map:

includeKeywordResults.filter(filterFunction).map((data, index) => (