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>
}
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) => (