Ad

Passing Separate Information Into A Hash Render

- 1 answer

So say I've got a hash of objects that I want to render in my parent's render:

renderChild: function(child) {
  return (
    <Child key={child}/>
  );
},

render: function() {
  return (
    <div>
      {Object.keys(hashObj).map(this.renderChild)}
    </div>
  );
}

But I've also got a variable I want to send along to this renderChild.

Would the best way to go about this is setting a state, or can I send a prop down through to the this.renderChild somehow through the map render?

Something along the lines of (which is wrong because I know it doesn't work): {Object.keys(hashObj).map(this.renderChild, someVariable)}

I would like to send it via a prop within the map, so I don't have to have a state to keep track of.

Was wondering if that is possible?

Ad

Answer

You can pass in an anonymous function that callsthis.renderChild instead of a direct reference to it. Don't forget to make sure map uses the right value for this:

render: function() {
  return (
    <div>
      {Object.keys(hashObj).map(function(item) {
        return this.renderChild(someVariable);
      }, this)}
    </div>
  );
}
Ad
source: stackoverflow.com
Ad