You are missing binding in your constructor, also you don’t need to pass props
if you are not using them in the constructor. Also you need to import { PropTypes } from 'react'
class SearchBar extends React.Component {
constructor() {
super();
this.handler = this.handler.bind(this);
}
handler(e){
this.props.filterUser(e.target.value);
}
render () {
return (
<div>
<input type="text" className="from-control search-bar" placeholder="Search" onChange={this.handler} />
</div>
);
}
}
export default class User extends React.Component {
constructor() {
super();
this.filterUser = this.filterUser.bind(this);
this.state = { name: '', age: '', filter: '' };
}
filterUser(filterValue){
this.setState({
filter: filterValue
});
}
render() {
return (
<div>
<SearchBar filterUser={this.filterUser} />
<span>Value: {this.state.filter}</span>
</div>
);
}
}