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