ReactJS with ES6: this.props is not a function when I communicate two components

Question

I\'m working with ReactJS with ES6, but I have some problems to communicate child > parent through props. Example of my approach:

class SearchBar extends Rea         


        

Answer 1

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 (
      

        
      
    );
  }
}


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 ( 
      

        
        Value: {this.state.filter}
      
    );
  }
}