how to toggle between two css classes view types with react

I have a List and Grid type display. How do I toggle between them in React. I want to toggle between jsGridView and jsListView classes.

This is the vanilla js of the toggling of classes

  const listView = document.querySelector('.list-view');
  const gridView = document.querySelector('.grid-view');
  const projectsList = document.querySelector('.project-boxes');
  
  listView.addEventListener('click', () => {
    gridView.classList.remove('active');
    listView.classList.add('active');
    projectsList.classList.remove('jsGridView');
    projectsList.classList.add('jsListView');
  });
  
  gridView.addEventListener('click', () => {
    gridView.classList.add('active');
    listView.classList.remove('active');
    projectsList.classList.remove('jsListView');
    projectsList.classList.add('jsGridView');
  });

** this is my react file where I have the display items and buttons to toggle. how do I implement the toggle event listeners into my react file** How do I toggle between the two classes – jsGridVew and jsListView

const [isActive, setIsActive] = useState(false)

    const listToggle = () => {
     setIsActive(!isActive)
    }

   <button key={isActive} className="view-btn list-view" title="List View" onClick={listToggle}>
        <i className="fal fa-list-ul fa-2x"></i>
    </button>

    <button className="view-btn grid-view active" title="Grid View">
        <i className="fal fa-th-large fa-2x"></i>
     </button>

     <div className="project-boxes jsGridView">
        {!loading && records.length === 0 ? (<h4 style={{ margin: '20px' }} className='center'>No 
           records, sorry</h4>) : records.map((record, key) => (
             <RecordItem key={key} record={record} isFilter={isFilter} filterByWhat={filterByWhat} />
           ))}
      </div>

EDIT: > I also want to add an ‘active class on each button on click. I’ve tried somethings but it doesn’t work

Answer

I am assuming this div is where you want to toggle between jsGridView and jsListView

<div className="project-boxes jsGridView">

So why not use a state variable to store the class name? Then use the onClick even to set it.

const [cName, setClassName] = useState('jsGridView');

return (
<Fragment>
   <button className="view-btn list-view" title="List View" onClick={() => setClassName('jsListView')}>
        List View
    </button>
   <button className="view-btn list-view" title="Grid View" onClick={() => setClassName('jsGridView')}>
        Grid View
     </button>


     <div className={"project-boxes "+cName}>
        {!loading && records.length === 0 ? (<h4 style={{ margin: '20px' }} className='center'>No 
           records, sorry</h4>) : records.map((record, key) => (
             <RecordItem key={key} record={record} isFilter={isFilter} filterByWhat={filterByWhat} />
           ))}
      </div>
</Fragment>
)

So here you set your class to jsGridView initially so it renders in grid view by default. But you also have 2 buttons that can flip it between grid and list view.

You can also add an active class to the button if you want.

   <button className={"view-btn list-view"+(cName === 'jsListView' ? ' active_btn':'')} title="List View" onClick={() => setClassName('jsListView')}>
        List View
    </button>
   <button className={"view-btn list-view"+(cName === 'jsGridView' ? ' active_btn':'')} title="Grid View" onClick={() => setClassName('jsGridView')}>
        Grid View
     </button>

Advertisement

Answer