how to write an onClick event in my react app to take array index in this code? I just want to get array index as a output

This is my array in JSON file.

{
        "Women": [
            {
                "id"  : 1,
                "name"  : "See All",
                "children" : [""]
            },
            {
                "id"  : 2,
                "name"  : "Clothes",
                "children" : [ "Coats & jackets" , "Suits & blazers" , "Skirts"]
            },
            {
                "id"  : 3,
                "name"  : "Shoes",
                "children" : [ "Boots" , "Flats" , "Ankle boots"]
            },
            {
                "id"  : 4,
                "name"  : "Bags",
                "children" : [ "Handbags" , "Backpacks" , "Clutches"]
            },
            {
                "id"  : 5,
                "name"  : "Accessories",
                "children" : [ "Jewelry" , "Belts" , "Scarves & Shawls"]
            },
            {
                "id"  : 6,
                "name"  : "Beauty",
                "children" : [ "Make Up" , "Face Care" , "Hand Care"]
            }
        ]
}

This is my array import

const Women = AdminCatData.Women.map ((data) => {
    
  return(
    { 
      ...data,
    }
  )
  }

)

This is the women array output

{/*Women Tab*/}
            <Tab.Panel
              className={({ selected }) =>
              classNames(
                'w-full py-2.5 text-sm leading-5 font-medium text-black rounded-lg', 
                'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-red-400 ring-white ring-opacity-60', 
                selected ? 'bg-white shadow' : 'text-white hover:bg-white/[0.12] hover:text-white'
              )
            }
            >

            <div className='grid grid-cols-3'>
              <ul className='col-span-1 mr-4'>
                {Women.map((item, index) => (
                  <ul>
                    <li className="relative p-3 rounded-md hover:bg-coolGray-100">
                      <h3 className="text-sm font-medium leading-5">
                        {item.name}
                      </h3>

                    <ul className="flex mt-1 space-x-1 text-xs font-normal leading-4 text-coolGray-500">
                      <li>Sub Categories </li>
                      <li>{item.children.join(' ')}</li>
                    </ul>

                    <a
                      href="#"
                      className={classNames(
                        'absolute inset-0 rounded-md',
                        'focus:z-10 focus:outline-none focus:ring-2 ring-red-400'
                      )}
                      key={item.id} onClick={() => console.log(index)}
                    />
                  </li>
                
                  </ul>
                ))}
                <button type="button" 
                        
                        onClick={() => setshowPopUp(true)}
                > Add new Category
                </button>
                </ul>

                <ul className='col-span-2 mr-4'>
                {Women.map((data) => (
                  <ul>
                    <li className="relative p-3 rounded-md hover:bg-coolGray-100">

                    <ul className="flex mt-1 space-x-1 text-xs font-normal leading-4 text-coolGray-500">
                      <li>Sub Categories </li>
                      <li>{data.children.join(' ')}</li>
                    </ul>

                    <a
                      href="#"
                      className={classNames(
                        'absolute inset-0 rounded-md',
                        'focus:z-10 focus:outline-none focus:ring-2 ring-red-400'
                      )}
                    />
                  </li>
                
                  </ul>
                ))}
                <button type="button" 
                        
                        onClick={() => setshowPopUp(true)}
                > Add new Subcategory
                </button>
                </ul>

              </div>

            </Tab.Panel>
{/* End Women Tab */

}

Women tab output Currently I get output like this.

Women tab expect output I need output like this

CodePudding user response：

Something like this?

const Women = () => (
  {AdminCatData.Women.map((item, index) => <button key={item.id} onClick={() => console.log(index)}>{item.name}</button>)}
)

CodePudding user response：

You can try something like this:

const AdminCatData = {
  "Women": [
    {
      "id"  : 1,
      "name"  : "See All",
      "children" : [""]
    },
    {
      "id"  : 2,
      "name"  : "Clothes",
      "children" : [ "Coats & jackets" , "Suits & blazers" , "Skirts"]
    },
    {
      "id"  : 3,
      "name"  : "Shoes",
      "children" : [ "Boots" , "Flats" , "Ankle boots"]
    },
    {
      "id"  : 4,
      "name"  : "Bags",
      "children" : [ "Handbags" , "Backpacks" , "Clutches"]
    },
    {
      "id"  : 5,
      "name"  : "Accessories",
      "children" : [ "Jewelry" , "Belts" , "Scarves & Shawls"]
    },
    {
      "id"  : 6,
      "name"  : "Beauty",
      "children" : [ "Make Up" , "Face Care" , "Hand Care"]
    }
  ]
};

function App() {
  return (
    <div>
      {AdminCatData.Women.map((woman, index) => {
        return <p onClick={() => console.log(index)}>{woman.name}</p>
      })}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>