React filter 'state' undefined - reactjs

Question

So I started using reactjs and I've managed to loop through some XML data but having issues adding a search/filter into it.
This is my code so far:
import React, { Component } from 'react';
import XMLMapping from 'xml-mapping';
import axios from 'axios';
class Guests extends Component {
constructor(props) {
super(props);
this.state = {
guests: [],
search: 'Search Guests'
};
}
componentDidMount() {
axios.get('http://localhost:8080/guestlist.xml')
.then(res => {
const xml = XMLMapping.load(res.data);
var guests = XMLMapping.tojson(xml);
this.setState({guests: guests});
//console.log(guests);
return guests;
});
}
updateSearch(event) {
this.setState({
// Limit to 10 characters only for search
search: event.target.value.substr(0, 10)
});
// console.log(this.state.search); // this will show the previous value of state.
}
render() {
function mapObject(object, callback) {
return Object.keys(object).map(function (key) {
return callback(key, object[key]);
});
}
const firstname = mapObject(this.state.guests, function (key, value) {
return <div key={key}>
{value.record
.map((item,index) => {
//console.log(index)
return <div className="columns" key={index}>
<div className="column" key={index}>{item.first_name.$t} {item.last_name.$t}</div>
<div className="column" >{item.company.$t}</div>
</div>;
})}
</div>
});
let filteredGuests = mapObject(this.state.guests, function (key, value) {
value.record.filter(
(contact) => {
return contact.first_name.$t.indexOf(this.state.search) !== -1;
//console.log(this.state.search)
}
);
});
return (
<div>
<div className="container">
<section className="section">
<h1 className="title">Guests attending Event A</h1> <input className="text" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} />
<div className="columns"><div className="column">Name</div><div className="column">Company</div></div>
{firstname}
</section>
</div>
</div>
);
}
}
export default Guests;
But it seems to be throwing an error TypeError: Cannot read property 'state' of undefined
This is the line return contact.first_name.$t.indexOf(this.state.search) !== -1;
Any advice or feedback would be appreciate!

Answer 1

As Prakash sharma wrote, you used the wrong function context.
Try to replace function with arrow function:
let filteredGuests = mapObject(this.state.guests, (key, value) => {
value.record.filter(
(contact) => {
return contact.first_name.$t.indexOf(this.state.search) !== -1;
//console.log(this.state.search)
}
);
})