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>
    );
  }
}

Jyothi Babu Araja · Accepted Answer · 2017-02-06 11:21:18Z

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 >
                      );

}

zwippie · Accepted Answer · 2017-02-06 12:29:38Z

0

Two problems:

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

edited Feb 6, 2017 at 12:29

answered Feb 6, 2017 at 11:22

zwippie

15.6k3 gold badges44 silver badges58 bronze badges

1 Comment

Tom Fenech Over a year ago

Your first point is correct but your second one isn't - the space doesn't make a difference.

Collectives™ on Stack Overflow

How to use increment operator in reactJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest