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.
@tayfunerbilen çok teşekkür ederim. Aradığım şey buydu.
@webdevyusuf denedim fakat yine aynı. Sorun for döngüsünün beklememesi. Attığınız örnekteki async-await olayını bende denedim ama o şekilde de olmuyor
@webdevyusuf cevap için teşekkürler ancak benim sorunum bu değildi. Sadece yukarıdaki kodda 2 console.log çıktısını sekron çalıştırmak istiyorum. Servis vs. kullanmıyorum.
Ben Material Theme ve Atom One Dark Theme kullanıyorum. Ayrıca font olarakta Fira Code kullanıyorum, baya hoş görünüyo.
1- Yukarıda indirtmek istediğiniz resmi kendi dosyanıza indirip path vererek indirmeniz mümkün
Örn: <a href="images/google.png" download>Click me!</a>
2- Veya uzak sunucudan(remote url) den bir dosya indirtmek istiyorsanız url nizi base64 formatına çevirip bu işlemi gerçekleştirebilirsiniz. Ancak bu kötü bir görüneme sahip.
Buraya örnek eklemek istedim fakat url çok uzun olduğu için hata aldım :) Sanırım arka tarafta bir kısıtlama var. Kısaca alt kısımda anlatayım.
https://base64.guru/converter/encode/url => Bu site ye girerek remote url kısmına indireceğin resmin linkine yaz. Alt kısımda sana uzunca bir base64 link gelecek. onu kopyala href attribute içine yapıştır. Bu şekilde indirme yapabilirsin.
https://jsfiddle.net/vsqpfgr8/ => şu şekilde bir örnek yaptım, umarım işine yarar.
Hocam cevap için çok teşekkür ederim. Çok açıklayıcı olmuş. Ayrıca video içinde çok teşekkür ederim. Harika anlatmışsınız.
https://jsfiddle.net/gprbft78/ => Şu örnek işine yarayabilir.
Hocam, sayfa yelindiğinde dizindeki verilerin silinmesi çok normal. Vue bilmiyorum ancak react kullanırken Redux kullanılıyo mesela.
Orda aldığın data sayfa yenilense dahi kaydettiğinde duruyo. Yani bi storage kullanman gerek. Vue için Vuex bu işi yapıyor sanırım.
Bir bakın isterseniz.