Setting the state on one item only

Question

How can I reverse or toggle the state only the item clicked. So far all of the tab classes are toggling to active. But I need only the one clicked. I'm teaching myself hooks. so no class component solutions please

  const  App = () => { 
      const tabItems = [
        {
          id:"1",
          tabname: "Unsplash",
          datatab: "unsplash",
          template: <Unsplash/>
        },
        {
          id:"2",
          tabname: "YouTube",
          datatab: "youtube",
          template: <Youtube/>
        },
        {
          id:"3",
          tabname: "Wikipedia",
          datatab: "wiki",
          template: <Wikipedia/>
        },
        {
          id:"4",
          tabname: "DropdownApp",
          datatab: "dropdownapp",
          template: <DropdownApp/>
        },
      ]        

      const [activeTab, setActiveTab] = useState(false)

      const tabs = tabItems.map((tab, i) => {
        return (
          <span
            className={`item ${activeTab ? 'active' : ''}`} 
            key={tab.id}
            data-tab={tab.datatab}
            onClick={() => setActiveTab(!activeTab)}>
            {tab.tabname}
          </span>
        )
      })

      const tabPanels = tabItems.map((tabPanel) => {
        return (
          <div 
            key={tabPanel.id} 
            className={`ui bottom attached tab segment ${activeTab ? 'active' : ''}`}
            data-tab={tabPanel.datatab}>
            {tabPanel.template}
          </div>
        )
      })

      return (
        <div className="App">
          <div className="ui main text" style={{padding: '20px'}}>      
            <div className="ui top attached tabular menu">
              {tabs}
            </div>
            {tabPanels}
          </div>
        </div>
      );
    }

Answer 1

You are only tracking if the tab are selected or not, not which one, since you have one state for all tabs. You need to track, which tab is selected:

const  App = () => { 
      const tabItems = [
        {
          id:"1",
          tabname: "Unsplash",
          datatab: "unsplash",
          template: <Unsplash/>
        },
        {
          id:"2",
          tabname: "YouTube",
          datatab: "youtube",
          template: <Youtube/>
        },
        {
          id:"3",
          tabname: "Wikipedia",
          datatab: "wiki",
          template: <Wikipedia/>
        },
        {
          id:"4",
          tabname: "DropdownApp",
          datatab: "dropdownapp",
          template: <DropdownApp/>
        },
      ]        

      const [activeTab, setActiveTab] = useState("") // Track the id

      const tabs = tabItems.map((tab, i) => {
        return (
          <span
            className={`item ${activeTab === tab.id ? 'active' : ''}`} // Check if the tab ids are the same
            key={tab.id}
            data-tab={tab.datatab}
            onClick={() => setActiveTab(tab.id)}> // Save the id instead of a boolean
            {tab.tabname}
          </span>
        )
      })

      const tabPanels = tabItems.map((tabPanel) => {
        return (
          <div 
            key={tabPanel.id} 
            className={`ui bottom attached tab segment ${activeTab === tab.id ? 'active' : ''}`}
            data-tab={tabPanel.datatab}>
            {tabPanel.template}
          </div>
        )
      })

      return (
        <div className="App">
          <div className="ui main text" style={{padding: '20px'}}>      
            <div className="ui top attached tabular menu">
              {tabs}
            </div>
            {tabPanels}
          </div>
        </div>
      );
    }

If you want to unselect a tab, you would need to modify the onClick:

setTab = (id) => {
   setActiveTab(tab => tab === id ? "" : id);
}

and invoke it with:

<span
   onClick={() => setTab(tab.id)}>