[Solved]-How to load more items from a map function on click of a button-Reactjs

score:2

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>
 )
}

Uchechukwu Nwafor 420

score:2

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>
 )
}

Olivier Boissé 13190

Source: stackoverflow.com

[Solved]-How to load more items from a map function on click of a button-Reactjs

Related Query

More Query from same tag