How to use increment operator in reactJS

Question

I'm performing the increment operation in react component on each iteration by using increment operator. I'm not able to perform the increment operator in react component. Kindly help me to get the solution for this.

import React, { Component } from 'react';
import Header from './js/components/Header';
import './App.css';
import './dist/css/bootstrap.css';
import cookie from 'react-cookie';
import Request from 'superagent';
import { browserHistory  } from 'react-router';


export default class Performance extends Component {
  constructor() {
    super();
    this.state = {
        fullName : cookie.load('fullName'),
        empId : cookie.load('empId'),
        userResults : [{
		"sectionTitle": "Customer Orientation",
		"isMandatory": 0,
		"question": [{
			"qusId": 1,
			"question": "Number of customer ",
			"weightage": 15,
		  }]
	  }]
    };   
}

render() {
        const userCount = 0;    
        return ( 
        <div >
        <Header />  
            <div className="container ">
                <form className="form-signin1"> 
                {  
                   this.state.userResults.map(function(res)
                   {
                 
                 var questions = res.question.map(function(res1){
                 return (
                  <tr>
                   <td>{res1.question}<input type="checkbox" value="" name={'ques_check_box_'+[res1.qusId]}/>
                    </td>
                   </tr>
                  )
               });
               return (
               <div className="row">
               { userCount ++ } //increment by one for each iteration
               <table className="table text-center" >
               <thead>
               <th width="400">Deliverables</th>
               <th>Justifications</th>
               <th>Weightage</th>
               <th className="lastHead">Employee <br />Weightage</th>
               </thead>
               <tbody>
               {questions}
               </tbody>
               </table> 
               </div>
               )
          })
        }
        </form>
    </div> 
    </div>
    );
  }
}

Answer 1

Two problems:

1. You defined userCount as a constant. That implies the value should never change. That's not what you wanted.
2. The space between userCount ++ has to be removed.

Answer 2

Instead of maintaining separate variable(userCount), You can make use of index parameter of .map.

Then render method will be like

render() {
    return ( < div >
        < Header / >
        < div className = "container " >
        < form className = "form-signin1" > {
          this.state.userResults.map(function(res, index) {

                var questions = res.question.map(function(res1) {
                      return ( < tr >
                        < td > {
                          res1.question
                        } < input type = "checkbox"
                        value = ""
                        name = {
                          'ques_check_box_' + [res1.qusId]
                        }
                        />
                    </td >
                        < /tr>
                  )
               });
               return (
               <div className="row">
               { index+1 } 
                        for each iteration < table className = "table text-center" >
                        < thead >
                        < th width = "400" > Deliverables < /th>
               <th>Justifications</th >
                        < th > Weightage < /th>
               <th className="lastHead">Employee <br / > Weightage < /th>
               </thead >
                        < tbody > {
                          questions
                        } < /tbody>
               </table >
                        < /div>
               )
          })
        }
        </form >
                        < /div> 
    </div >
                      );

}