I am doing filter the data which comes from API but I am stuck at filter the data.
here is my filter.js file
import React from 'react'
const Filter = ({
searchInput,
setSearchInput,
photos,
setFiltered
}) => {
const handleSubmit = (e) =>{
e.preventDefault();
}
const searchPhotos = (searchValue) =>{
setSearchInput(searchValue)
if(searchInput) {
const filterPhotos = photos.filter((photo)=>
Object.values(photo)
.join("")
.toLowerCase()
.includes(searchValue.toLowerCase())
)
setFiltered(filterPhotos)
} else {
setFiltered(photos)
}
}
return (
<>
<section className='filter'>
<form className='form-control' onSubmit={handleSubmit}>
<input type="search"
name="search"
id="search"
autoComplete='off'
placeholder='Search Photos'
onChange={(e)=> searchPhotos(e.target.value)}
/>
</form>
</section>
</>
)
}
export default Filter
here is photos.jsx file
(where I supposed to filter the data comes from API). On load data comes perfectly via API search query but when I type on search box it will shows error. Uncaught TypeError: photos.filter is not a function
import React, { useEffect, useState } from 'react';
import Filter from './Filter';
const url = 'https://api.pexels.com/v1/search?query=Nature'
const Photos = () => {
const [photos, setPhotos] = useState([]);
const [filtered, setFiltered] = useState([]);
const [searchInput, setSearchInput] = useState("");
const [isLoading, setIsLoading] = useState(true)
useEffect(()=>{
const fetchPhotos = async () =>{
const res = await fetch((url),{
headers: {
Authorization: 'MY_API_KEY'
}
})
const photos = await res.json()
setPhotos(photos)
setIsLoading(false)
}
fetchPhotos()
},[])
return (
<>
<Filter
searchInput={searchInput}
setSearchInput={setSearchInput}
setFiltered={setFiltered}
setPhotos={setPhotos}
photos={photos}
/>
{
isLoading ? (
<h1 className='loading'>Loading...</h1>
) : searchInput.length > 1 ? (
<section className="countries">
{
filtered.photos.map((photo,index)=>{
return(
<article key={index}>
<div className="flag">
<img src={photo.src.original} alt={photo.photographer} />
</div>
<div className="details">
<h4 className="country-name">
Photographer Name: <span>{photo.photographer}</span>
</h4>
</div>
</article>
)
})}
</section>
) : (
<section className="countries">
{
photos.photos.map((p, index) =>{
const {photos, src} = p
return(
<article key={index}>
<div className="flag">
<img src={p.src.original} alt={p.photographer} />
</div>
<div className="details">
<h4 className="country-name">
Photographer Name: <span>{p.photographer}</span>
</h4>
</div>
</article>
)
})
}
</section>
)
}
</>
)
}
export default Photos
API Data is
{
"page": 1,
"per_page": 15,
"photos": [
{
"id": 15286,
"width": 2500,
"height": 1667,
"url": "https://www.pexels.com/photo/person-walking-between-green-forest-trees-15286/",
"photographer": "Luis del Río",
"photographer_url": "https://www.pexels.com/@luisdelrio",
"photographer_id": 1081,
"avg_color": "#283419",
"src": {
"original": "https://images.pexels.com/photos/15286/pexels-photo.jpg",
"large2x": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"large": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940",
"medium": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350",
"small": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=130",
"portrait": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
"landscape": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
"tiny": "https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
},
"liked": false,
"alt": "Person Walking Between Green Forest Trees"
},
}
]