Проблема в React JS или array.filter();
 

Всем привет! У меня такая проблема - разбираю react JS и пол дня лажу по сети в поиске проблемы , не могу понять.



var contacts = [
{
id:1,
club:"Locomotiv",
phone:"Velcom"
},
{
id:2,
club:"CSKA Moskow",
phone:"MTC"
},
{
id:3,
club:"Krilya Sovetov",
phone:"Velcom"
}
];
class List extends React.Component{
constructor(props){
super(props);

this.state = { returnContacts:contacts};
console.log(this.state);
console.log(contacts);

}

malfunc(event){

console.log(event);
var input_val = event.target.value;
console.log(input_val);
var ret = contacts.filter(function(el){
console.log(el);
var club_arr = el.club;
console.log(club_arr);

var res = club_arr.indexOf(input_val) !== -1;
console.log(res);
return res;

});
console.log(ret);
this.setState({returnContacts:ret});
}


render(){
return (
<div>
<input type='text' onChange={this.malfunc}/>

<ul>
{

this.state.returnContacts.map(function (el) {
return <li>{el.club}</li>
})
}

</ul>
</div>
);
}
};
ReactDOM.render(
<List />,
document.getElementById('main')
);




Вот код . есть список ,который выводится из contacts. Я пытаюсь сделать ,чтобы при вводе в текстовое поле буквы список перерисовывался такой, где эти буквы встречаются. В методе filter все обрабатываетс нормально , но в переменную ret все равно записывается underfined и ругается что setState не может обработать underfined. Не могу понять почему . Помогите пожалуйста с проблемкой

Проблема в том, что ты передаешь функцию в "onChange" без привязки к классу:

onChange={this.malfunc}

Это не правильно, нужно вот так:

onChange={this.malfunc.bind(this)}

Вот рабочий код:

https://jsbin.com/kofareh/6/edit?html,js,output