CODEWITHSUNDEEP
javascriptarraysreactjs
Milos
Milos

Reputation: 619

Add <hr> tag after the last item of array

I have list of menu items and I want to add <hr> tag after the last item of the array. That list I am mapping through looks like this:

const checkBoxItems = [
  { value: "pdf", label: "Dashboard as PDF", group: "image" },
  { value: "png", label: "Dashboard as PNG", group: "image" },
  { value: "jpg", label: "Dashboard as JPG", group: "image" },
  { value: "segment", label: "Save selection to segment" },
  { value: "fcsv", label: "Facebook CSV", group: "social" },
  { value: "gcsv", label: "Google Ads CSV", group: "social" },
  { value: "email", label: "E-mail", group: "social" }
];

and I want to add <hr> tag after the last item with group 'image' and after the last item with group 'social'. This is how my map looks like:

return menuItems.map((item, index) => (
  <StyledMenuItem
    value={item.value}
    selected={item.value === value}
    key={index}
  >
    <Checkbox
      key={index}
      checked={isSelected.includes(item.value.toString())}
      onClick={() => isCheckboxChecked(item.value)}
    >
      <Label>{item.label}</Label>
    </Checkbox>
  </StyledMenuItem>
));

It would look something like this:

Example output

Any idea or code sample on how to achieve this will be appreciated.

Upvotes: 0

Views: 273

Answers (2)

Nithish
Nithish

Reputation: 6019

I have created this sample app where I have grouped the data as per your requirement before rendering on to the DOM.

In the example you can replace below

{data.map(d => <p>{d.label}</p>)}

with

  <StyledMenuItem
    value={item.value}
    selected={item.value === value}
    key={index}
  >
    <Checkbox
      key={index}
      checked={isSelected.includes(item.value.toString())}
      onClick={() => isCheckboxChecked(item.value)}
    >
      <Label>{item.label}</Label>
    </Checkbox>
  </StyledMenuItem>

Hope this helps.

Upvotes: 1

AttemptedMastery
AttemptedMastery

Reputation: 768

To prevent having to rely on a sorted object, what I did was find the index of the last instances of image and social and did my conditional logic that way.

const checkBoxItems = [
  { value: "pdf", label: "Dashboard as PDF", group: "image" },
  { value: "png", label: "Dashboard as PNG", group: "image" },
  { value: "jpg", label: "Dashboard as JPG", group: "image" },
  { value: "segment", label: "Save selection to segment" },
  { value: "fcsv", label: "Facebook CSV", group: "social" },
  { value: "gcsv", label: "Google Ads CSV", group: "social" },
  { value: "email", label: "E-mail", group: "social" }
];

let imgIndex;
let socialIndex;

for(let i = 0; i < checkBoxItems.length; i++){
    if (checkBoxItems[i].group === 'image'){
        imgIndex = checkBoxItems.indexOf(checkBoxItems[i])
    }
    if (checkBoxItems[i].group === 'social'){
        socialIndex = checkBoxItems.indexOf(checkBoxItems[i])
    }
}
// this will get you the index of the last element with an 'image' group or a 'social' group
console.log(imgIndex, socialIndex)

return menuItems.map((item, index) => (
if (imgIndex === index || socialIndex === index) {
       <hr>
   } else{
       <StyledMenuItem
       value={item.value}
       selected={item.value === value}
       key={index}
     >
       <Checkbox
         key={index}
         checked={isSelected.includes(item.value.toString())}
         onClick={() => isCheckboxChecked(item.value)}
       >
         <Label>{item.label}</Label>
       </Checkbox>
     </StyledMenuItem>
   }
));

Upvotes: 0

Related Questions