Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React TypeError this._test is not a function

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>
    );
  }
}
like image 670
Daniel Storch Avatar asked Nov 23 '15 13:11

Daniel Storch


People also ask

Is not a function in React error?

The React. js "Uncaught TypeError: X is not a function" occurs when we try to call a value that is not a function as a function, e.g. calling the props object instead of a function. To solve the error, console. log the value you are calling and make sure it is a function.

Why we need to bind this in React?

ReactJS bind() Method The bind() is an inbuilt method in React that is used to pass the data as an argument to the function of a class based component. Syntax: this. function.

Is not a function error JS?

This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.

How to pass function from one component to another in React?

For passing the data from the child component to the parent component, we have to create a callback function in the parent component and then pass the callback function to the child component as a prop. This callback function will retrieve the data from the child component.


1 Answers

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.

like image 71
Timon Avatar answered Sep 23 '22 11:09

Timon