یاسین مهرانی فر
10 ماه پیش توسط یاسین مهرانی فر مطرح شد
1 پاسخ

حذف مقادیر داخل array با فیلتر

من این اری رو دارم:

    const data =
    [
        {title:"فروش و نصب شیشه اتوموبیل امین", urlPic:gl} ,
        {title:"اپارتمان 195 متری رحمانیه تک واحدی", urlPic:ho} ,
        {title:"تولید اکاسیو اکاسیف تیرچه فلزی بتنی",urlPic:fo} ,    
        {title:"برد تغذیه سوخته ولی صفحه سالم 42hv37100", urlPic:tv} ,
        {title:"دکوری جواهر کوبی" ,urlPic:za} ,
        {title:"جواهر کاری فروغ کادوییماندگار", urlPic:za1} ,
        {title:"لباس مجلسی سایز44",urlPic:ma} ,
        {title:"مبل مبلمان راحتی چستر باکس", urlPic:mob} ,
        {title:"گلدان سرامیکی با گل طبیعی و پایه گلدان فقط" ,urlPic:fl} ,
        {title:"پیکان وانت مدل 84" ,urlPic:pk} ,
        {title:"اپل سیز 10pro max 256g دو سیم کارت" ,urlPic:ph} ,
        {title:"کیف مجلسی شیک ترند", urlPic:ba},
    ]

حالا میخوام مپ کنم ولی به همراه یک دکمه برای حذف اون ها

 <div className="map-p">
                {data.map((card,index) => { return (
                    <div className="mapdiv" key={`div-${index}`}>
                        <Link to={"/detailscamp"}>
                            <img className="mapimg"  src={card.urlPic} />
                        </Link>
                        <div className="elem">
                            <h2 className="mapp" >
                                {card.title}
                            </h2>
                            <button  className="mapdelet">
                                حذف
                            </button>
                        </div>
                    </div>)})}
            </div> 

حالا سوالم اینکه باید چه چیزی برای باتن بزارم که وقتی انکلیک شد اونقسمت مربوطه از اری رو برام حذف کنه؟


ثبت پرسش جدید
محمد حسین
تخصص : mevn stack
@saghari 10 ماه پیش آپدیت شد
1

اول دیتا رو تبدیلش کن به state بعدم برای حذف دیتا رو برابر کن با دیتایی که اون ایندکس رو نداره

const [data, setData] = useState(...)
function del(index) {
    setData(data.filter((d, i) => i === index))
}

بعدم برای اون باتنه میذاریش

<button onClick={e => del(index) }>... </button>

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام