How to load more items from a map function on click of a button

user_16784520 0
Viewed 868

I have this jsx expression that renders a maximum of 5 items from an array using the map function. How can I make it so that the rest of the items render on click of the button? The list of items in the array is unknown as it's coming from an API, so sometimes it can be 10 items or 15 items, etc.

const Second = ({container}) => {

  return(
    <div>
      {container?.slice(0, 5).map((container) => (
         <h3>{container}</h3>
      ))}
      <button type="button" class="btn btn-primary">Primary</button>
    </div>
 )
}
reactjs javascript
2 Answers

you can declare a boolean state variable to determine if you want to show all the items or only the first five, this variable will be updated when you click on the button :

function Second({container = []}) {
  const [showAll, setShowAll] = useState(false);

  function handleClick() {
    setShowAll(prevShowAll => !prevShowAll);
  }

  const items = showAll ? container : container.slice(0, 5);

  return(
    <div>
      {items.map(item => <h3>{item}</h3>)}
      <button type="button" class="btn btn-primary" onClick={handleClick}>
        {showAll ? "Show first five items" : "Show all items"}
      </button>
    </div>
 )
}
user_55216070

You can have a state that determines that and then set the state to true on click of the button: Someting like this

const Second = ({container}) => {
   const [showMore, setShowMore] = useState(false);

  return(
    <div>
      {container?.slice(0, 5).map((container) => (
         <h3>{container}</h3>
      ))}
      
      {showMore && container?.slice(5).map((container) => (
         <h3>{container}</h3>
      ))} //this would show the remaining values
      <button type="button" class="btn btn-primary" onClick={() => setShowMore(true)}>Primary</button>
    </div>
 )
}
user_134066530
Related