Array Values separation-CodePudding

This is my code section, While printing the {data.children} (Which is in the third code section)values I need a Separation between the values (Currently they are printing together). (As an example: children01 children02 children03) How can I do that?

This is the JSON file with Women array

{
  "Women": [
    {
      "id"  : 1,
      "name"  : "See All",
      "children" : [""]
    },
    {
      "id"  : 2,
      "name"  : "Clothes",
      "children" : [ "A" , "B" , "C"]
    },
    {
      "id"  : 3,
      "name"  : "Shoes",
      "children" : [ "D" , "E" , "F"]
    },
    {
      "id"  : 4,
      "name"  : "Bags",
      "children" : [ "E" , "F" , "G"]
    },
    {
      "id"  : 5,
      "name"  : "Accessories",
      "children" : [ "H" , "I" , "J"]
    },
    {
      "id"  : 6,
      "name"  : "Beauty",
      "children" : [ "K" , "L" , "M "]
    }
  ],
  "Men": [
    {
      "id"  : 1,
      "name"  : "See All",
      "children" : [""]
    },
    {
      "id"  : 2,
      "name"  : "Clothes",
      "children" : [ "Men" , "B" , "C"]
    },
    {
      "id"  : 3,
      "name"  : "Shoes",
      "children" : [ "D" , "E" , "F"]
    },
    {
      "id"  : 4,
      "name"  : "Bags",
      "children" : [ "E" , "F" , "G"]
    },
    {
      "id"  : 5,
      "name"  : "Accessories",
      "children" : [ "H" , "I" , "J"]
    },
    {
      "id"  : 6,
      "name"  : "Beauty",
      "children" : [ "K" , "L" , "M "]
    }
  ],
  "Kids": [
    {
      "id"  : 1,
      "name"  : "See All",
      "children" : [""]
    },
    {
      "id"  : 2,
      "name"  : "Clothes",
      "children" : [ "Kid" , "B" , "C"]
    },
    {
      "id"  : 3,
      "name"  : "Shoes",
      "children" : [ "D" , "E" , "F"]
    },
    {
      "id"  : 4,
      "name"  : "Bags",
      "children" : [ "E" , "F" , "G"]
    },
    {
      "id"  : 5,
      "name"  : "Accessories",
      "children" : [ "H" , "I" , "J"]
    },
    {
      "id"  : 6,
      "name"  : "Beauty",
      "children" : [ "K" , "L" , "M "]
    }
  ]
}

This is JSON file array calling

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

This is In the return Statement

{Women.map((data) => (
  <ul>
   
      <li
        
        className="relative p-3 rounded-md hover:bg-coolGray-100"
      >
        <h3 className="text-sm font-medium leading-5">
        {data.name}
        </h3>

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

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

CodePudding user response：

You can use the .join method with a space as separator.

{data.children.join(' ')}