پاسخ داده شد
0
0

فرض کنید لیست بلندی از آیتم ها داریم و می خواهیم تنها 10 تای ابتدایی را نمایش دهیم و از باتن های “بیشتر” و “کمتر” برای نمایش و عدم نمایش مابقی آیتم ها استفاده کنیم. چطور در react این کار را انجام دهیم؟

view more in react - موستانگ

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

بصورت زیر می توانیم این کار انجام دهیم. اگر تعداد آیتم ها از 10 تا بیشتر باشد یک دکمه View More اضافه می شود و کاربر با زدن آن می تواند تمام آیتم ها را ببیند و با زدن View Less فقط 10 تای اول را ببیند.

import React, { useState } from 'react';

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10', 'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15'];

const App = () => {
  const [showAll, setShowAll] = useState(false);

  const handleClick = () => {
    setShowAll(true);
  };

  const renderItems = () => {
    if (showAll) {
      return items.map((item, index) => <div key={index}>{item}</div>);
    } else {
      return items.slice(0, 10).map((item, index) => <div key={index}>{item}</div>);
    }
  };

  return (
    <div>
      {renderItems()}
      {!showAll && <button onClick={handleClick}>View More</button>}
    </div>
  );
};

export default App;

*با تعریف یک متغیر state بنام showAll ، می توانیم بفهمیم چه زمان باید تمام آیتم ها را نمایش دهیم و چه زمان کوتاه شده آن ها را. (با فشردن دکمه view more ، مقدار این متغیر تغییر می کند)

*با متد map ، تمامی آیتم ها را نمایش می دهیم و با متد slice ، تعداد مشخصی که می خواهیم را (در اینجا 10 آیتم)

  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت