ReactJs - List view with vertical lines. How to draw this?

Question

As in the image above, there is a vertical line linking each number(1,2,3...) in the list. How do we achieve that in react js?

Answer 1

You can render a simple list (ul, and lis) using Array.map(), and do the numbering using CSS counters and pseudo elements:

const data = [1, 2, 3, 4, 5, 6];

const Demo = ({ items }) => (
  <ul>
    {
      items.map(key => (
        <li key={key}>item{key}</li>
      ))
    }
  </ul>
);

ReactDOM.render(
  <Demo items={data} />,
  demo
);
  

ul {
  counter-reset: list;
  border-left: 2px solid lightgrey;
  margin: 1em;
  padding: 0;
}

ul li {
  list-style: none;
  margin: 0 0 0.5em 0;
  padding: 0;
}

ul li:before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 0.5em 0 -0.65em;
  border-radius: 50%;  
  content: counter(list);
  text-align: center;
  background: lightgrey;
  counter-increment: list;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

Answer 2

You can map through list, and use index as second parameter of map function: https://stackoverflow.com/a/38364482/5709697

But index starts from 0, so you can add 1 to index.

The circles itself and lines, connecting them is css work