How to implement fetch API by search - reactjs

Question

I have a search bar. when I enter the name of any film, filtered data has to be displayed (as a result of fetching from API)
function App() {
const [films, setFilms] = useState([])
const [searchText, setSearchText] = useState('')
const [filteredRes, setFilteredRes] = useState([])
const url = `http://www.omdbapi.com/?apikey=KEY&s=${searchText}`
useEffect (()=> {
loadData()
}, [searchText])
const loadData = async () => {
const res = await axios.get(url)
setFilms(res.data.Search)
const filtered = await films.filter(i => i.toLowerCase().includes(searchText))
setFilteredRes(filtered)
}
const onTextChange = (e) => {
setSearchText(e.target.value)
}
return (
<>
<Container>
<h1>Bookstore</h1>
<Row>
<form>
<input type='text'
placeholder='Search...'
name="searchText"
onChange={onTextChange}
value={searchText}
/>
</form>
</Row>
<Row>
{ filteredRes.map(item => {
return (
<Col lg={3} md={3} sm={12} key={item.imdbID}>
<img src={item.poster}/>
<h6>{item.title}</h6>
<h6>{item.year}</h6>
</Col>
)
})}
</Row>
</Container>
</>
);
}
I have am issue:
Unhandled Rejection (TypeError): Cannot read property 'filter' of undefined. But why if I save fetched films in const [ films ] ?

Answer 1

Ooutput:
You don't have to filter fetched data additionally, the data that is being fetched by Axios is already filtered according to the serchText so Axios call does the all.
Full Example:
import React, { useState } from "react";
import Axios from "axios";
const APIKEY = "your api";
export default function App() {
const [searchText, setSearchText] = useState("");
const [films, setFilms] = useState([]);
const handleSubmit = (event) => {
event.preventDefault();
if (!searchText) {
alert("Please enter movie name");
return;
}
Axios.get(
`http://www.omdbapi.com/?i=tt3896198&apikey=${APIKEY}&s=${searchText}`
)
.then((response) => {
console.log(response.data);
setFilms(response.data.Search);
})
.catch((error) => {
console.log(error);
});
};
return (
<div className="App">
<form onSubmit={handleSubmit}>
<input
placeholder={"Search movie"}
onChange={(event) => {
setSearchText(event.target.value);
}}
/>
<button>Search</button>
</form>
{films.map((film) => (
<div>
<img src={film["Poster"]} alt={film["Title"]} width={100} />
<p>{film["Title"]}</p>
<p>{film["Year"]}</p>
</div>
))}
</div>
);
}
Github Repo