Olá, estou tentando entender o código feito na parte dos filtro:
const [fotosDaGaleria, setFotosDaGaleria] = useState(fotos)
const [filtro, setFiltro] = useState('')
const [tag, setTag] = useState(0)
useEffect(() => {
const fotosFiltradas = fotos.filter(foto => {
const filtroPorTag = !tag || foto.tagId === tag;
const filtroPorTitulo = !filtro || foto.titulo.toLowerCase().includes(filtro.toLowerCase())
return filtroPorTag && filtroPorTitulo
})
setFotosDaGaleria(fotosFiltradas)
}, [filtro, tag])
A const fotosFiltradas, como o nome sugere, recebera as fotos que passarem nos filtros.
Dentro do fotosFiltradas há duas variáveis que recebem algo de acordo com o valor de tag e filtro respectivamente. Como tem o operador || (ou) se a condição do primeiro valor der true ele nem irá para o segundo, pois, para satisfazer esse operador, somente um dos valores precisa ser true. Desse modo, quando o input estiver vazio, o valor de filtro será false, mas como é !filtro se tornará true, assim o filtro do título não será executado. Ademais isto ocorre da mesma forma na tag, o valor inicial e o filtro de todos é 0, logo false, mas como é !tag será true, então o filtro não ocorre.
A parte dos filtros em si acho bem intuitivo pelo código.
No final é "settado" no fotosGaleria os valores que resultaram do filtro cada vez que o state de filtro ou tag é alterado.
O código que eu fiz no desafio ficou diferente, por isso queria intender melhor se ocorre do jeito que eu pensei.
