بصورت زیر می توانیم این کار انجام دهیم. اگر تعداد آیتم ها از 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 آیتم)