How to access vairables outside display function in js and jsx in React component

Question

var PieceList = React.createClass({ render: function() { var pieces; if (this.props.pieces && this.props.onDeletePiece2) { var pieces = this.props.pieces.map(function (piece) { return ( <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} /> ) }); } return ( <div className="piecesTable"> {pieces} </div> ); } }); 

I'm at a dead end on how to make this work. The problem is that {this.props} is not available inside the display function.

Would there be a better choice here? dumb, pls halp!

Answer 1

map is a regular JavaScript method (see Array.prototype.map ). It can take an argument that sets the context ( .map(callback[, thisArg]) ):

 var PieceList = React.createClass({ render: function() { var pieces; if (this.props.pieces && this.props.onDeletePiece2) { var pieces = this.props.pieces.map(function (piece) { return ( <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} /> ) }, this); // need to add the context } return ( <div className="piecesTable"> {pieces} </div> ); } }); 

I would suggest going back and reading about this in JavaScript. When you pass an anonymous function to most methods (e.g. .map , .forEach , etc.), it takes a global context (which is almost always window ). If you pass this as the last argument, since this this refers to the class you just created using React.createClass , it will set the correct context.

In other words, the way you tried to do this is to access window.props , which obviously does not exist. If you opened the console for debugging, you would see the Object Window doesn't have the property "props" or something very confusing.

Answer 2

EDIT 2: Respond 0.14.x

Now you can define functional components of an upright state for components that do not require complex intercepts of life cycle events or internal state

 const PieceList = ({pieces, onDeletePiece2}) => { if (!onDeletePiece2) return; return ( <div className="piecesTable"> {pieces.map(x => ( <Pieces pieceData={x} onDeletePiece3={onDeletePiece2}> ))} </div> ); }; 

---

EDIT 1: ES6

As ES6 continues to become more visible, you can also avoid nitpicky problems by using the function with the ES6 arrow .

 class PieceList extends React.Component { renderPiece(piece) { return <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} />; } render() { if (!this.props.onDeletePiece2) return; return ( <div className="piecesTable"> {this.props.pieces.map(piece => this.renderPiece(piece))} <div> ); } } 

To run it in most environments, you need to “block” it using something like babel.js

---

The quick answer is that you need to bind the correct this to the map callback, passing this as the second arg

 this.props.pieces.map(..., this); 

This may be the best way to write your tho component

 var PieceList = React.createClass({ renderPiece: function(piece) { return <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} />; }, render: function() { if (!this.props.onDeletePiece2) return; return ( <div className="piecesTable"> {this.props.pieces.map(this.renderPiece, this)} </div> ); } }); 

Regarding your comment about map

 var x = {a: 1, b: 2}; ['a', 'b'].map(function(key) { // `this` is set to `x` // `key` will be `'a'` for the first iteration // `key` will be `'b'` for the second iteration console.log(this[key]); }, x); // notice we're passing `x` as the second argument to `map` 

Will output

 // "1" // "2" 

Notice how the second argument to map can set the context for the function. When you call this inside a function, it will be equal to the second variable that was sent to map .

These are the basics of JavaScript, and you should definitely read more here.

Answer 3

Are you using a transpiler - something like Babel? If so, this code will work fine:

 if (this.props.pieces && this.props.onDeletePiece2) { var pieces = this.props.pieces.map((piece, i) => { return ( <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} key={i}/> ) }); ... 

code>

If you cannot use the transpiler, you can do this:

 if (this.props.pieces && this.props.onDeletePiece2) { var that = this; var pieces = that.props.pieces.map( function(piece, i) { return ( <Piece pieceData={piece} onDeletePiece3={that.props.onDeletePiece2} key={i}/> ) }) 

... Code>