Switch between tabs on click-CodePudding

The idea is to switch between tabs when the tab name is click.

import { useState } from 'react'
import Bookmark from './options/Bookmark.js'
import Search from './options/Search.js'
import Sharing from './options/Sharing.js'

const Features = () => {
   return (
      <div className="features">
         <h2>Features</h2>
         <p>Our aim is to make it quick and easy for you to access your favourite websites. Your bookmarks sync between your devices so you can access them on the go.</p>
    
         <div className="feature-options">
            <ul>
               <li onClick={}>Simple Bookmarking</li>
               <li onClick={}>Speedy Searching</li>
               <li onClick={}>Easy Sharing</li>
            </ul>

            //Tab area
            <Bookmark />
         </div>
      </div>
   )
}

Basically every time one of the li are clicked on, I want the appropriate tab to be shown. I tried doing this:

const [bookmarkTab, changeBookmarkTab] = useState(true)
const [searchTab, changeSearchTab] = useState(false)
const [sharingTab, changeSharingTab] = useState(false)

const setBookmark = () =>{
   !bookmarkTab && changeBookmarkTab(!bookmarkTab)
   searchTab && changeSearchTab(!searchTab)
   sharingTab && changeSharingTab(!sharingTab)
}
const setSearch = () =>{
   !searchTab && changeSearchTab(!searchTab)
   bookmarkTab && changeBookmarkTab(!bookmarkTab)
   sharingTab && changeSharingTab(!sharingTab)
}
const setSharing = () =>{
   !sharingTab && changeSharingTab(!sharingTab)
   bookmarkTab && changeBookmarkTab(!bookmarkTab)
   searchTab && changeSearchTab(!searchTab)
}

//inside the feature-options div
<ul>
   <li onClick={setBookmark}>Simple Bookmarking</li>
   <li onClick={setSearch}>Speedy Searching</li>
   <li onClick={setSharing}>Easy Sharing</li>
</ul>

//Tab area
{bookmarkTab && <Bookmark />}
{searchTab && <Search />}
{sharingTab && <Sharing />}

But this doesn't seem to work properly, how am I suppose to do this? Is there a clean way to this?

CodePudding user response：

You have the right approach to conditionally render the tab content and use state to show the appropriate content.

I believe its not working because you are using a stateful value to set state.

Your example can be simplified by using just one stateful value.

import { useState } from 'react'
import Bookmark from './options/Bookmark.js'
import Search from './options/Search.js'
import Sharing from './options/Sharing.js'

const Features = () => {
   const [tab, setTab] = useState("bookmark")

   return (
      <div className="features">
         <h2>Features</h2>
         <p>Our aim is to make it quick and easy for you to access your favourite websites. Your bookmarks sync between your devices so you can access them on the go.</p>
    
         <div className="feature-options">
            <ul>
               <li onClick={() => setTab("bookmark")}>Simple Bookmarking</li>
               <li onClick={() => setTab("search")}>Speedy Searching</li>
               <li onClick={() => setTab("share")}>Easy Sharing</li>
            </ul>

            //Tab area
            {tab === "bookmark" && <Bookmark />}
            {tab === "search" && <Search/>}
            {tab === "share" && <Sharing />}
         </div>
      </div>
   )
}