Search functionality not working consistently in React - reactjs

Question

I have created a React app using this API and then tried to add a search functionality. Everything is working fine, but sometimes I am not able to see the result of the search. For example, if you look at this screenshot you will be able to see what I am trying to say. Also, I want to ignore the case sensitivity and would like to get the exact result irrespective of its case. I tried to convert the searched term and the countries into uppercase but that was not giving the correct results.
App.js:
import React, { Component } from 'react'
import Result from './Result';
import Form from 'react-bootstrap/Form';
export default class App extends Component {
constructor(){
super();
this.state = {
data: [],
searchText:'',
searchResult:[],
isSearch:false
}
this.onSearchChange=this.onSearchChange.bind(this);
// this.fetchSearchResult=this.fetchSearchResult.bind(this);
}
onSearchChange= (e) =>{
console.log("search change "+this.state.searchText)
this.setState({
searchText:e.target.value,
isSearch:!this.state.isSearch
})
console.log("api data"+this.state.data)
}
/* fetchSearchResult= () =>{
console.log(this.state.searchText)
console.log("inside fetch")
let store= this.state.data.map(item=>{
let {country}=item
return(country)
})
console.log(store)
var areEqual = store.includes(this.state.searchText);
console.log(this.state.areEqual)
return (areEqual)?
store:'not matched'
// return store;
} */
componentDidMount() {
const url =
'https://corona.lmao.ninja/countries?sort=country'
fetch(url)
.then(result => result.json())
.then(result => {
this.setState({
data: result,
})
})
}
render() {
return (
<div>
<Form.Group>
<Form.Label>Search</Form.Label>
<Form.Control value={this.state.searchText}onChange={this.onSearchChange} type="text" placeholder="Enter country" />
</Form.Group>
<Result data={this.state.data}
toSearch={this.state.searchText}
searchCheck={this.state.isSearch}
searchValue={this.state.searchText}/>
</div>
)
}
}
Result.js
import React from 'react'
import Table from 'react-bootstrap/Table';
const Result = (props) => {
console.log('props value is:'+props.data)
let {searchCheck, searchValue}=props;
let update=props.data.reverse().map((item)=>{
const { countryInfo, country, cases, deaths, recovered, active, casesPerOneMillion} = item;
return(
(searchCheck)?country.includes(searchValue)?
<tbody>
<tr key={countryInfo._id}>
<td><img style={{height:'25px',width:'50px'}}src={countryInfo.flag}/></td>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<th>{casesPerOneMillion}</th>
<td>{deaths}</td>
</tr>
</tbody>:
'':
<tbody>
<tr key={countryInfo._id}>
<td><img style={{height:'25px',width:'50px'}}src={countryInfo.flag}/></td>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<th>{casesPerOneMillion}</th>
<td>{deaths}</td>
</tr>
</tbody>
)
})
return (
<div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>Flag</th>
<th>Country</th>
<th>Cases</th>
<th>Active</th>
<th>Recovered</th>
<th>Cases per one Million</th>
<th>Deaths</th>
</tr>
</thead>
{update}
</Table>
</div>
)
}
export default Result;
Sandbox link

Answer 1

The problem is with your onSearchChange function. For every onchange in the input field, you are trying to reset the isSearch state. Due to this the search becomes false at odd intervals resulting in not filtering the search results. Hence, you are seeing the entire list of countries though there is some search term in the search box. You don't need that isSearch at all. If there is any text in the search box, then filtering is done else it displays the entire list.
Here is a working demo of this - https://codesandbox.io/s/cool-poitras-tuu55
Hope this helps!