React Accordion displays all sections

I would like to make an accordion with react but do that when I click on a title it’s all the others that are displayed instead of just one.
I would like to make an accordion with react but do that when I click on a title it’s all the others that are displayed instead of just one.

import { useState } from "react"
import "./sidebar.css"
import sublinks from '../../data'
const Sidebar = () => {
  const [showInfo, setShowInfo] = useState(false)
  
  console.log(showInfo)
  return (
    <div className="sidebar show">
      <div className="sidebar__container">
        <button className="close-btn">x</button>
        <div className="sidebar__container__w">
          {sublinks.map((item, index) =>{
            const {links, page}= item
            return (
              <div className="sidebar__menu__wrapper" key={index}>
                <button
                  className="sidebar__menu"
                  onClick={() => setShowInfo(!showInfo)}
                >
                  {page}
                </button>

                {showInfo && (
                  <div className=" side__Links" key={index} >
                    {links.map((link,index) =>{
                      const {label,url} = link
                      return (
                        <a key={index} href={url} className="side__Link">
                          {label}
                        </a>
                      )
                    })}
                  </div>
                ) }
              </div>
            )
          })

          }
          
        </div>
      </div>
    </div>
  )
}
export default Sidebar

>Solution :

That is because you only have "one" condition and all the sections use it.
You can use a js object instead of a single boolean.

Try this:

import "./sidebar.css"
import sublinks from '../../data'
const Sidebar = () => {
  const [expandedSections, setExpandedSections] = useState({});

  const toggleSection = index => {
    setExpandedSections(prev => {
      const newState = {...prev}
      newState[index] = !newState[index];
      return prev;
    })
  }
  
  return (
    <div className="sidebar show">
      <div className="sidebar__container">
        <button className="close-btn">x</button>
        <div className="sidebar__container__w">
          {sublinks.map((item, index) =>{
            const {links, page}= item
            return (
              <div className="sidebar__menu__wrapper" key={index}>
                <button
                  className="sidebar__menu"
                  onClick={() => toggleSection(index)}
                >
                  {page}
                </button>

                {expandedSections[index] && (
                  <div className=" side__Links" key={index} >
                    {links.map((link,index) =>{
                      const {label,url} = link
                      return (
                        <a key={index} href={url} className="side__Link">
                          {label}
                        </a>
                      )
                    })}
                  </div>
                ) }
              </div>
            )
          })

          }
          
        </div>
      </div>
    </div>
  )
}
export default Sidebar

Or if you want to open one section at a time, do this:

import { useState } from "react"
import "./sidebar.css"
import sublinks from '../../data'
const Sidebar = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  const toggleSection = index => {
    setActiveIndex(activeIndex === index ? null : index)
  }
  
  return (
    <div className="sidebar show">
      <div className="sidebar__container">
        <button className="close-btn">x</button>
        <div className="sidebar__container__w">
          {sublinks.map((item, index) =>{
            const {links, page}= item
            return (
              <div className="sidebar__menu__wrapper" key={index}>
                <button
                  className="sidebar__menu"
                  onClick={() => toggleSection(index)}
                >
                  {page}
                </button>

                {activeIndex === index && (
                  <div className=" side__Links" key={index} >
                    {links.map((link,index) =>{
                      const {label,url} = link
                      return (
                        <a key={index} href={url} className="side__Link">
                          {label}
                        </a>
                      )
                    })}
                  </div>
                ) }
              </div>
            )
          })

          }
          
        </div>
      </div>
    </div>
  )
}
export default Sidebar