CODEWITHSUNDEEP
reactjsreact-hooks
krunal patel
krunal patel

Reputation: 41

Search functionality is not consistant in React Hooks

I am trying to implement search functionality in ReactJs using Hooks(useState).

The result I am getting is not proper since it only sets previously typed character in a search_keyword instead of each new character in a search box.

for example:

if I am writing "I" in the search box, the search_keyword will be " ".

if I am writing "In" in the search box, the search_keyword will be "I".

if I am writing "Ing" in the search box, the search_keyword will be "In".

and so on. You can see it in the below figures. 1) enter image description here Note: nothing happens with the search

2) enter image description here Note: now it searches for the elements having "I" init instead of "In"

Code snipets are:

Main.js

const [word,setWord] = useState("");
console.log(word)
const [persons, setStudentProfiles] = useState([]);

const fetchStudentpProfiles = () => {
    fetch('https://www.hatchways.io/api/assessment/students')
    .then(result => result.json())
    .then(data => setStudentProfiles(data.students) )
    .catch(error => console.log(error));
};
const [filterCopy,setFilterCopy] =useState([])
const handleChange = e =>{
    
    setWord(e)
  let oldList = persons.map(person => {
      
    return {
        firstName: person.firstName.toLowerCase(),
        lastName: person.lastName,
        pic:person.pic,
        email:person.email,
        city:person.city,
        company:person.company,
        grades:person.grades,
        id:person.id,
        skill:person.skill,
        tags : person.tags

    };
  });
  if(word!== ''){
    let newList = [];
    newList = oldList.filter(person =>
        person.firstName.includes(word.toLowerCase())
    );
    console.log(newList)
    setFilterCopy(newList);
  }else{
    setFilterCopy(persons);
  }
};
useEffect(() => {
    fetchStudentpProfiles()
},[]);

Driver Code:

<Filter value={word} handleChange={e =>handleChange(e.target.value)}/>

I have tried maintaining and manipulating separate array for search, but didn't work.

Any help would be appreciated. Thanks

Upvotes: 1

Views: 110

Answers (2)

Yousaf
Yousaf

Reputation: 29282

State is updated asynchronously, so trying to use word after calling setWord will result in giving you the previous value of word instead of the latest value.

To fix the problem, use the e parameter passed to handleChange function which is the latest value of the input field.

if(e !== ''){
    let newList = [];
    newList = oldList.filter(person =>
        person.firstName.includes(e.toLowerCase())
    );
    setFilterCopy(newList);
}
else{
    setFilterCopy(persons);
}

Upvotes: 1

pho mai
pho mai

Reputation: 194

Try

useEffect(() => {
  // Do stuff when word change
},[word]);

to get lastest state

Upvotes: 0

Related Questions