69
rated 0 times
[
72]
[
3]
/ answers: 1 / hits: 6416
/ 5 Years ago, sat, november 9, 2019, 12:00:00
I have run into a weird bug with my search input component where it loses focus on every keypress and can't figure out why.
const App = () => {
let [characters, setCharacters] = useState([]);
let [filteredCharacters, setFilteredCharacters] = useState([]);
// more state
let [search, setSearch] = useState();
useEffect(() => {
setIsLoading(true);
axios
.get(`https://swapi.co/api/people/?page=${pageNumber}`)
.then(res => {
console.log(res.data.results);
setCharacters(res.data.results);
setFilteredCharacters(res.data.results);
})
.catch(err => console.error(err))
.then(() => {
setIsLoading(false);
});
}, [pageNumber]);
function updatePage(e) {
// update page
}
function handleSearch(e) {
setSearch(e.target.value);
const filtered = characters.filter(character => {
if (character.name.toLocaleLowerCase().indexOf(e.target.value) !== -1) {
return character;
}
});
setFilteredCharacters(filtered);
}
function SearchBar() {
return (
<React.Fragment>
<StyledInput
type=text
id=search
value={search}
placeholder=Search by name...
onChange={e => handleSearch(e)}
/>
</React.Fragment>
);
}
return (
<React.Fragment>
<GlobalStyles />
<div className=App>
<Heading>React Wars!</Heading>
<SearchBar />
<Pagination handleClick={updatePage} />
{!isLoading && Object.entries(filteredCharacters).length ? (
<CharacterList characters={filteredCharacters} />
) : (
<LoadingBar />
)}
</div>
</React.Fragment>
);
};
I'm also getting a Line 65:50: Expected to return a value at the end of arrow function array-callback-return for the characters.filter() line so I don't know if that has to do with it.
If it helps, the deployed app with the bug can be seen here --> https://mundane-vacation.surge.sh
More From » reactjs
