click button to toggle show one component and hide another component in reactjs-CodePudding

I have two separate button like grid and list button:

<button 
     onClick={() => setClassName('jsGridView')}
     title="Grid View"
 >
     <IoGrid className="active" size="25"/>
</button>  

<button 
     onClick={() => setClassName('jsListView')}
     title="List View"
   >
    <BiAlignLeft size="25"/>
</button>

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

So when i click Grid view button it will show this component:

<GridCard className={cName}/>

and when i click list view button it will show

<ListCard className={cName}/>

with this mentioned className..

class is changed button but show hide component is not working.

CodePudding user response：

You can display different components depending on the value of cName.

<div className="row mt-4 book-div">
   <div className={cName}>   
   { cName === 'jsGridView' ? <BooksGridCard/> : <BooksListCard/> } 
   </div>
</div>