React JS, Arama kutusu bu koda nasıl yapabilirim?
Search İnput nasıl yapabilirim?
görmüş olduğunuz koda nasıl arama kısmı ekleyebilirim yapamıyorum lütfen yardımcı olun.
import React, { useState, useEffect } from "react";
import firebase from "../firebase";
import "./row.css";
function useAksiyon() {
const [aksi, setAksi] = useState([]);
useEffect(() => {
firebase
.firestore()
.collection("aksiyon")
.onSnapshot((snapshot) => {
const newAksi = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setAksi(newAksi);
});
}, []);
return aksi;
}
const AksionList = () => {
const aksi = useAksiyon();
return (
<div className="row">
<h3>Aksiyon Filmleri</h3>
<div className="row__posters">
{aksi.map((aksiyon) => (
<a href={aksiyon.movies_iframe} key={aksiyon.movies_id}>
<img
className="row__poster"
src={aksiyon.movies_poster}
alt={aksiyon.movies_title}
/>
</a>
))}
</div>
</div>
);
};
export default AksionList;
?>
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState(null);
const [searchData, setSearchData] = useState(null);
useEffect((_) => {
setData([
{
name: "Who Am I",
poster: "http:///"
},
{
name: "Düğün Dernek",
poster: "http:///"
},
{
name: "Deneme",
poster: "http:///"
}
]);
}, []);
const search = (e) => {
if (e && e != "") {
console.log(e)
setSearchData(data.filter((x) => x.name.indexOf(e) > -1))
} else {
setSearchData(data)
}
};
return (
<div className="App">
<input onChange={(e) => search(e.target.value)} />
{searchData && searchData.map((x) => <span>{x.name}</span>)}
<div></div>
</div>
);
}
Hocam yukarıdaki örneği test edebilmen için statik data ile yaptım. Sen oraya kendi datanı koayabilirsin. Usestate içerisindeki data senin aksi değişkenin olacak.
