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 React.Component {
  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(props) {
    super(props);
    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>
  }
}

This returns Uncaught TypeError: this.props.filterUser is not a function.

Any idea? Binding maybe?

[EDIT] Solution (Thanks @knowbody & @Felipe Skinner):

I was missing binding in my constructor. Binding in the SearchBar constructor works perfectly.

Using React.createClass() (ES5), it automatically does bindings to this for your functions. In ES6 you need bind this manually. More info https://facebook.github.io/react/docs/reusable-components.html#es6-classes

knowbody · Accepted Answer · 2015-12-04T13:02:02.630

23

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

edited Dec 04 '15 at 13:02

answered Jun 30 '15 at 15:01

knowbody

8,106
6
45
70

Nice! works, but throws an error "unexpected token" setting the propTypes like that. `SearchBar.propTypes = { filterUser: React.PropTypes.func };` works better. – skozz Jun 30 '15 at 15:50
sorry fixed it, what I have used before is the ES7 way https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#es7-property-initializers – knowbody Jun 30 '15 at 15:51
1

Yes, of course. Anyway this works without setting propTypes, you are right: I was missing binding in my constructor. Binding in the SearchBar constructor works perfectly. – skozz Jun 30 '15 at 15:55
1

@skozz glad I could help – knowbody Jun 30 '15 at 15:56
Hey , I am trying the similar implementation in reactnative , but it throws error "this.props.filterUser is not a function". Can anyone tell me what I'm doing wrong. My code is smilar to what is there in the solution above – Abhinandan Sahgal Sep 14 '16 at 11:23
@AbhinandanSahgal can you show me your code? maybe paste it into a gist so I can comment there? – knowbody Sep 14 '16 at 12:26

Felipe Skinner · Answer 2 · 2015-06-30T15:02:26.647

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.

score 2 · Answer 3 · answered Apr 19 '19 at 12:43

2

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"

answered Apr 19 '19 at 12:43

T. Alves

21
2

score 0 · Answer 4 · answered Mar 16 '23 at 09:10

0

it can be also a mis export:

wrong: export function name ...

export default name

correct:

function name export default name

answered Mar 16 '23 at 09:10

Mariusz Sidorowicz

336
3
12

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

4 Answers4

Linked