cannot get the parent property this property when I have two inner loop

Question

I have a complicated scenario which I am really confused how to deal with it. I have an array as follows:

stories=[
    {
        "categ": "politics",
        "arr": [{
            "t": 1
        }, {
            "t": 2
        }, {
            "t": 3
        }]
    }, 
    {
        "categ": "Business",
        "arr": [{
            "t": 1
        }, {
            "t": 2
        }, {
            "t": 3
        }]
    }
]

As you can see this array has another array inside it and depending on what is executed I need to loop through the first array and find the appropriate array inside the first array. So for instance if I want to get the array related to business category I need to loop through the first array and choose the array related to business. To do so I have the following code:

<div className="row">
                {
                    this.props.stories.map((item,i)=> <Story key={i}   position={i} story={item} ></Story>)

                }
            </div>

So you can see that with map I am able to loop through the first array. Now considering that by using this.props.categ I can access the category that I want. so I have to change my code to sth like below:

 <div className="row" >
                {

                 this.props.stories.map(function(snippet){
                     if(snippet.categ==="politics"){
                     return(
                         snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>)


                     );

                     }
                 })
                }
            </div>

But in the above code "politics" is hard coded and should be replaced with this.props.categ. However as soon as I replace that I get the error saying

Uncaught TypeError: Cannot read property 'props' of undefined

which totally make sense since I am loosing the parent this since I do not use es6 fat arrow. Now how can make this work?

Answer 1

You can bind the outer map function like

 <div className="row" >
            {

             this.props.stories.map(function(snippet){
                 if(snippet.categ===this.props.categ){
                 return(
                     {snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>})


                 );

                 }
             }.bind(this))
            }
        </div>

This will allow you map function to refer to the outer context where prop is available. Also you forgot to include your inner map function inside {}

Other option is to use the arrow function

 <div className="row" >
            {

             this.props.stories.map(snippet) => {
                 if(snippet.categ===this.props.categ){
                 return(
                     {snippet.arr.map((item,i)=> <Story key={i} position={i} story={item} ></Story>})


                 );

                 }
             }.bind(this))
            }
        </div>

Answer 2

Save the this to that before entering the function.

Then use that.props.categ to refer to the outer this.

If that makes any sense :D

Something like so:

render(){
    // place here
    // at the top of render function
    // but outside the return
    var that = this;

    return (
        {something.map(function(snippet){
           if (snippet.categ === that.props.categ){
               // do things here
           }
        })}
    );

}