Add
tag after the last item of array Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Add
tag after the last item of array
without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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.

Answer

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.

We are here to answer your question about Add
tag after the last item of array
- If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji