Below is the full code and here's the key lines:
const [showAll, setShowAll] = useState(false);
const visibleHistory = showAll ? searchHistory : searchHistory.slice(0, 8);
{visibleHistory.map((entry, index) => ( ........
{searchHistory.length > 8 && ( .........
import React, { useState, useEffect } from 'react';
import { useCookies } from 'react-cookie';
const SidebarHistory = () => {
const [cookies, setCookies] = useCookies(['searchHistory']);
const [searchHistory, setSearchHistory] = useState([]);
const [showAll, setShowAll] = useState(false);
useEffect(() => {
setSearchHistory(cookies.searchHistory || []);
}, [cookies.searchHistory]);
const handleDelete = (index) => {
const updatedHistory = [...searchHistory];
updatedHistory.splice(index, 1);
setSearchHistory(updatedHistory);
setCookies('searchHistory', updatedHistory, { path: '/' });
};
const visibleHistory = showAll ? searchHistory : searchHistory.slice(0, 8);
return (
<div className='sidebar_history'>
<ul>
{visibleHistory.map((entry, index) => (
<li key={index} className='history-item'>
{entry}
<div className='history-overlay'>
<a href='#'>Edit</a>
<a href='#' onClick={() => handleDelete(index)}>Delete</a>
<a href='#'>Share</a>
</div>
</li>
))}
</ul>
{searchHistory.length > 8 && (
<div className='history-links'>
{showAll ? (
<a href='#' onClick={() => setShowAll(false)}>Minimize History</a>
) : (
<a href='#' onClick={() => setShowAll(true)}>See All History</a>
)}
</div>
)}
</div>
);
};
export default SidebarHistory;