title: Create dynamic classname followed by incrementing value with Reactjs
body: <p>I have a component that renders a list.  Each item has a classname.  My question is how can I dynamically add a classname followed by an incrementing value.</p>
  
  <pre><code>function Menu(props) {
      const list = ['list1', 'list2', 'list3']
      const menuitems = list.map((list, index) =&gt; {
          return &lt;li className="menuitem" key={index}&gt;{list}&lt;/li&gt;
      })
  
      return (
          &lt;ul&gt;{menuitems}&lt;/ul&gt;
      )
  }
  </code></pre>
  
  <p>In the DOM, it should look like this: </p>
  
  <pre><code>&lt;ul&gt;
      &lt;list class="menuitem item-1"&gt;list1&lt;/li&gt;
      &lt;list class="menuitem item-2"&gt;list2&lt;/li&gt;
      &lt;list class="menuitem item-3"&gt;list3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>