How to add divider in dynamic list?

Question

I copy this example from the doc enter image description here

and I want to add divider between them, but whereever I add the divider, it does not work. How can I add divider between list items?

Answer 1

I think you can try component of Material UI and check if(index === 0 || index !== (list.length - 1)) => not render

Answer 2

.item {
   margin-top: 10px;
   border-top: 1px solid black;
   padding-top: 10px;
}

.item:first-child {
   margin-top: 0;
   border-top: none;
   padding-top: 0;
}

///map your list components like this.ssssssssssssssssssssssssssssssss



<ul className="list">
  {array.map((item) => (
    <li key={item.id} className="item"><Item item={item} /></li>
  )}
</ul>