How to filter and set the Array items based of DDL Select value change in ReactJS?

Question

I am trying to filter the the inventoryBase Array values based on the selected dropdown list value.

Here I am filtering the given JSON based on the "sectionName": "Arena C-690/pool" where Arena C-690/pool is the first value in dropdown list.

But the code which I have tried so far giving an error of

Uncaught TypeError: Cannot read property 'inventoryBase' of undefined

on this this.state.inventoryBase.map( (item) => { line of code in selectedSection function.

On Select change I called selectedSection function

like this: <select className="form-control" onChange={this.selectedSection}>

selectedSection(e) {
    var newData = [];
    this.state.inventoryBase.map( (item) => {
        if(item.sectionName === e.target.value){
            console.log(e.target.value)
            newData.push(item);
      }
    });
    this.setState({inventoryBase: newData})
}

And here is the JSON:

{
    "result": {
        "InventoryBase": [
            {               
                "providerName": "abcd",
                "EventOffers": [
                    {                        
                        "sectionName": "Arena C-690/pool",
                        "seatingArea": {
                            "seating": "Arena C-690/pool",
                            "Price": {
                                "currencyCode": "gbp",
                                "totalPrice": 40.5
                            }
                        },
                        "min": 1,
                        "max": 8,                       
                        "free_seat_blocks": {
                            "blocks_by_row": {
                                "22": [
                                    [
                                        "2218"
                                    ]
                                ],
                                "23": [
                                    [
                                        "2315"                                      
                                    ]
                                ],
                                "24": [
                                    [
                                        "2411",
                                        "2412"
                                    ]
                                ]
                            },
                            "restricted_view_seats": []                           
                        }
                    },
                    {                        
                        "sectionName": "Arena D-690/pool",
                        "seatingArea": {
                            "seating": "Arena D-690/pool",
                            "Price": {
                                "currencyCode": "gbp",
                                "totalPrice": 40.5
                            }
                        },
                        "min": 1,
                        "max": 8,                       
                        "free_seat_blocks": {
                            "blocks_by_row": {
                                "22": [
                                    [
                                        "2219"                                       
                                    ]
                                ],
                                "23": [
                                    [
                                        "2319"                                        
                                    ]
                                ],
                                "24": [
                                    [
                                        "2419",
                                        "2420"
                                    ]
                                ]
                            },
                            "restricted_view_seats": []                           
                        }
                    }                    
                ],
                "lastupdatedate": "2017-10-11T07:35:13"
            }
        ]      
            {
                "_id": "59d767c0adea80c9122d8026",
                "eventid": "41Z4",
                "name": "Classic Carols - Alan Titchmarsh",
                "description": "Classic Carols - Alan Titchmarsh",
                "seatmapstaticUrl": null,
                "locale": null,
                "lastupdatedate": "2017-10-06T06:23:43",
                "providername": "ingresso",
                "image": [],
                "venues": [
                    {
                        "id": "41Z4",
                        "name": "Royal Albert Hall",
                        "url": null,
                        "timezone": null,
                        "address1": null,
                        "address2": null,
                        "city": null,
                        "cityid": null,
                        "state": null,
                        "statecode": null,
                        "country": "United Kingdom",
                        "countrycode": "uk",
                        "postalCode": null,
                        "longitude": null,
                        "latitude": null,
                        "locale": null
                    }
                ],
                "priceInfo": {},
                "categories": {
                    "id": "music",
                    "name": "music",
                    "subcategory": "music"
                },
                "performance": [
                    {
                        "providerid": "41Z4-2",
                        "eventDateLocal": "2017-12-20T07:45:00",
                        "eventDateUTC": "2017-12-20T13:45:00Z",
                        "url": "/41Z4-classic-carols-alan-titchmarsh/",
                        "status": "live"
                    },
                    {
                        "providerid": "41Z4-3",
                        "eventDateLocal": "2017-12-20T12:45:00",
                        "eventDateUTC": "2017-12-20T18:45:00Z",
                        "url": "/41Z4-classic-carols-alan-titchmarsh/",
                        "status": "live"
                    }
                ]
            }
        ]
    }
}

Answer 1

Probably the this keyword in your invocation of this.state.inventoryBase does not point to your Component but to a different object context ; as a result, this.state is undefined.

Try binding your event handler in the constructor, after you defined the state:

constructor(props) {
  super(props);
  state = { ... state init goes here ... };
  // binds the event handler's 'this' to the Component
  this.selectedSection = this.selectedSection.bind(this);
}