Use "this" pointer from inside map callback function using ReactJs

Question

Using ReactJs, I want to insert this in map function's callback but I couldn't find a way.

render:function(){
var DateTimeField = require('react-bootstrap-datetimepicker');
console.log(this);
console.log(123);


var cards = this.state.nameWithQualifier.map(function (card) {

    return (        
    <div > 
      <div className="panel panel-primary ">
        <div className={ "panel-body " + card.insertTime } >
         <label className="col-md-9 checkbox-inline">
            <input type="checkbox" className={card.insertTime} ></input>
            {card.insertText}
          </label>
          <div className="col-md-3"> DeadLine :  {card.insertTime}</div>           
        </div>
      </div>
    </div>
    );
});

does `}.bind(this));` works? – llamerr Apr 14 '16 at 16:27 — llamerr, Apr 14 '16 at 16:27

Sai Ram · Accepted Answer · 2016-04-16T06:07:27.567

0

using .bind fixed

render:function()
var DateTimeField = require('react-bootstrap-datetimepicker');
console.log(this);    
console.log(123);


var cards = this.state.nameWithQualifier.map(function (card,this) {

return (        
<div > 
  <div className={"panel panel-primary" + this.state.workState}>
    <div className={ "panel-body " + card.insertTime } >
     <label className="col-md-9 checkbox-inline">
        <input type="checkbox" className={card.insertTime} ></input>
        {card.insertText}
      </label>
      <div className="col-md-3"> DeadLine :  {card.insertTime}</div>           
    </div>
  </div>
</div>
);}.bind(this));

edited Apr 16 '16 at 06:07

answered Apr 14 '16 at 16:43

Sai Ram

4,196
4
26
39

1

It would be a bit cleaner to use the second argument to `map`. – Apr 16 '16 at 06:06
@torazaburo thanks – Sai Ram Apr 16 '16 at 06:07

Use "this" pointer from inside map callback function using ReactJs

1 Answers1