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

When ur using React.createClass(), it automatically does bindings to this for your functions.

Since you're using the ES6 class syntax, you need to do those bindings by yourself. Here's two options:

render() {
    return <div>
      <SearchBar filterUser={this.filterUser.bind(this)} />
      <span>Value: {this.state.filter}</span>
    </div>
  }

Or you could bind it on your constructor like this:

constructor(props) {
    super(props);
    this.state = {name: '', age: '', filter: ''};
    this.filterUser = this.filterUser.bind(this);
  } 

You can read about this on the docs: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Note that those two options are mutually exclusive.

Answer 2

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>
    );
  }
}

Answer 3

In my case, I was importing the component the wrong way. I have the components "HomeAdmin" and "Register".

I had this in HomeAdmin.js: import { Register } from "/path/to/register"

Changed to this and worked: import Register from "/path/to/register"