React TypeError this._test is not a function

Question

Since im new to JavaScript and React, i really have problems figuring out the right syntax.

Here my problem:

_handleDrop(files) should call the function _validateXML(txt) but doesn't. I receive this error Uncaught TypeError: this._validateXML is not a function and can't figure out why. The callBack _handleDrop(files) works fine.

When i try this kind of syntax _validateXML:function(txt) i immediately get a error while compiling. Is that because of ecmascript?

import React from 'react';
import './UploadXML.scss';
import Dropzone from 'react-dropzone';
import xml2js from 'xml2js';

export default class UploadXML extends React.Component {

  constructor() {
    super();
    this._validateXML = this._validateXML.bind(this);
  }

  _validateXML(txt) {
    console.log('Received files: ', txt);
  }

  _handleDrop(files) {
    if (files.length !== 1) {
      throw new Error("Please upload a single file");
    }
    var file = files[0];

    console.log('Received files: ', file);

    this._validateXML(file);
  }

  render() {
    return (
      <div>
            <Dropzone onDrop={this._handleDrop} multiple={false}>
              <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
      </div>
    );
  }
}

Solution 1

When you're using the ES6 classes instead of React.createClass, it does not autobind this.

The reason why:

React.createClass has a built-in magic feature that bound all methods to this automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.

Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.

Also see: http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

What you could do in this instance is binding this to your _handleDrop function, like:

<Dropzone onDrop={this._handleDrop.bind(this)} multiple={false}>

You can also remove the assigning of the function from your constructor.

Solution 2

Also, this error can also occur (not in the context of question aske), when Some One passes a function down to a Child Component with wrong name, i.e., the function accessed in the Child Component is not defined due to spelling mistake.

I came here to figure that, but found out that was the case with me. :) Hope it will help someone.

Solution 3

The way we solved this issue is to use an experimental es7 feature which lets you declare a function in this way within a class:

handleExpandCollapse = () => {
    this.setState({
      isExpanded: !this.state.isExpanded,
    });
  }

And that is autobound to this, so your JSX will be the same.

Comments

[Trevor Nestman]

This solved my issue with a form within the onSubmit portion. I was calling another method within the called method, but it couldn't.