title: Show All Button - JSX Logic
body: <p>I'm trying to develop a button that once I click it I show all the items available on my shopping list. But I'm struggling to put all the pieces together and come up with the correct syntax.</p>
  <p>I have an array with 20 items and I would like to have initially only 15 (I'm assuming I'd have to use useState there?) displayed on the screen. Once I'd click the button it would show all the items on my shopping list array. Can any body help me to structure this feature? Thanks :)</p>
  <pre><code>const showAll = useCallback(() =&gt; {
      const availableItems = items;
  
      if (availableItems &gt; 15) {
        //STRUGGLING
      }
    }, []);
  
    return (
      &lt;div className=&quot;items.container&quot;&gt;
        &lt;ul className=&quot;shoplist-items&quot;&gt;
          {items.map((item, i) =&gt; {
            return (
              &lt;li className=&quot;items&quot;&gt;
                &lt;div className=&quot;single-item&quot; key={i}&gt;
                  {item}
                &lt;/div&gt;
              &lt;/li&gt;
            );
          })}
        &lt;/ul&gt;
        &lt;div className=&quot;show-all-container&quot;&gt;
          &lt;p onClick={showAll}&gt;Show all&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  </code></pre>