How can I add an active class when a button is clicked in ReactJS

Question

What i want to acheive is to have an active class when a link is clicked. I'm using react

This is the pagination.js file where I want to have the active class on each number clicked

 const Pagination = ({ recordsPerPage, totalRecords, paginate }) => {
    
    const pageNumbers = []

    for(let i = 1; i <= Math.ceil(totalRecords / recordsPerPage); i++) {
        pageNumbers.push(i)
    }
    return (
        
        <ul className='pagination center'>
           <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>

               {pageNumbers.map(number => (
                   <li key={number} style={{ marginLeft: '5px'}}>
                       <a href='#!' className='hoverable' onClick={() => paginate(number)}>
                         {number}
                       </a>
                   </li>
               ))}

           <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
            
        </ul> 
    )
}

question from:https://stackoverflow.com/questions/65876634/how-can-i-add-an-active-class-when-a-button-is-clicked-in-reactjs

Answer 1

You can just add a state here, when your onclick fire, set the state of current index

const Pagination = ({ recordsPerPage, totalRecords, paginate }) => {
    const [activePage, setActivePage] = useState(0);

    const pageNumbers = []

    for(let i = 1; i <= Math.ceil(totalRecords / recordsPerPage); i++) {
        pageNumbers.push(i)
    }

    const handlePaginate = (index) => {
        setActivePage(index);
        paginate(index)
    }

    return (
        
        <ul className='pagination center'>
           <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>

               {pageNumbers.map(number => (
                   <li key={number} style={{ marginLeft: '5px'}} className={activePage === number && 'active'}>
                       <a href='#!' className='hoverable' onClick={() => handlePaginate(number)}>
                         {number}
                       </a>
                   </li>
               ))}

           <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
            
        </ul> 
    )
}

As for initial state, right now just default to 0, but it should be whatever current page you are on.