I have a below object

multiSpaceIdentityInformation =    
{
   roomNumber: "N/A"
   spaceNumber: "L1-008-5, L4-003, L1-009"
   spaceName: "Space, STUDIO, LOBBY"
}

I am looking to represent this with listed information like this below

const identityData = [
    { label: 'Room Number', value: multiSpaceIdentityInformation.roomNumber },
    {
      label: 'Space Info',
      value: `${multiSpaceIdentityInformation.spaceNumber} - ${multiSpaceIdentityInformation.spaceName}`
    }
  ];

  return (
    <Descriptions size="small" column={1} title="Identity">
      {identityData.map(({ label, value }) => (
        <Item key={label} label={<Text strong>{label}</Text>}>
          {value}
        </Item>
      ))}
    </Descriptions>
  );

What I am trying to represent in the spaceInfo label string looks like as this

L1-008-5 - Space, L4-003- STUDIO, L1-009 - LOBBY

But with the above code for the Space Info, it is printing like as this below

L1-008-5, L4-003 - Space, STUDIO ... and I am not sure where I am wrong with the above code, and could anyone please suggest any idea where it goes wrong.

Many thanks in advance

CodePudding user response：

Do you expect something like this?

let m = {
   rnum: "N/A",
   snum: "L1-008-5, L4-003, L1-009",
   sn: "Space, STUDIO, LOBBY"
};


let snumA=m.snum.split(',');
let snA=m.sn.split(',');


console.log(
  snumA.reduce((r,i,idx)=>{
     r=`${r}${idx!==0 ? ',' : ''}${i} - ${snA[idx]}`
     return r;
  },'')   
)

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>