Question

91

Using react props in .map function

rated 0 times [ 92] [ 1] / answers: 1 / hits: 45908 / 8 Years ago, wed, may 11, 2016, 12:00:00

Let's say I have the following render function on one of my components.
From the parent element I have passed a changeTid prop function.

Parent:

<RequestsList data={this.state.data} changeTid={this.changeTid} />

Child:

(I'm using ES6 classes)

render() {  

var RequestNodes = this.props.data.map(function(request) {

  return (

    <Request 

        key={request.TID} 

        changeTid={this.props.changeTid}

    />

  );

});



    return (

        <div className=list-group>{RequestNodes}</div>

    );

}

I can't use this.props.changeTid in my map function as this is not referencing what I wan't. Where do I bind it so I can access my props?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ammonderekm

Add To Favorites

Follow

Total Points: 247

Total Questions: 105

Total Answers: 98

Location: Tuvalu

Member since Sat, Feb 11, 2023

1 Year ago

answered 8 Years ago keric · Accepted Answer

You can set this for .map callback through second argument

var RequestNodes = this.props.data.map(function(request) {

   /// ...

}, this);

or you can use arrow function which does not have own this, and this inside it refers to enclosing context

var RequestNodes = this.props.data.map((request) => {

       /// ...

});