React component don't recognize function?

Question

I am fairly new in working with react.js. But I think with documentation everything should be possible, Right? Wrong.

Following documentation structure of a component I am trying to build a Filter Component. This is my code:

import React from "react";
import ReactDOM from "react-dom";

class FilterBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeFilters: "",
      availableAttributes: []
    };
  }

  componentDidMount() {
    $.ajax("/activeFilters", {
      success: function(e) {
        this.setActiveFilter(e);
      },

      error: function(e) {
        alert(e);
      }
    });
  }

  componentWillUnmount() {}

  setActiveFilter(value) {
    this.setstate({
      activeFilters: value
    });
  }

  render() {
    return (
      <div id="auto_banner" className="inline_block col-sm-3 col-xs-12">
        <div id="toggle_filterBody" className="text-left col-xs-5 col-md-2">
          <span>
            <img src="img/filter2.png" />
          </span>
          <span>Toggle Filter</span>
        </div>

        <div id="Quick_Filter">
          <h3>Smart Filter</h3>
          <p>
            Begin searching through hundreds of vehicles quickly with this easy
            to use tool.
          </p>

          <hr />

          <form name="quick_filter" encType="application/x-www-form-urlencoded">
            <div id="year_range">
              <span className="tag">Year Range</span>

              <div>
                <input
                  className="col-xs-5 year_range"
                  type="text"
                  name="min-year"
                  value=""
                  placeholder="MIN: yyyy"
                />
                to
                <input
                  className="col-xs-5 year_range"
                  type="text"
                  name="max-year"
                  value=""
                  placeholder="MAX: yyyy"
                />
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

if (document.getElementById("InventoryDisplay")) {
  ReactDOM.render(document.getElementById("FilterBar"));
  ReactDOM.render("ok", document.getElementById("InventoryDisplay"));
}

Now when I refresh the browser I get an error which says that the function setActiveFilter isn't recognized. Why?

I'd rather suggest you to use a HTTP library such as Axios or Request. Using jQuery just for AJAX is totally absurd, because you are already using React (both are UI libraries). It'll only make your project heavy. — Ajay Gupta
– Ajay Gupta, Commented Apr 2, 2018 at 4:21
Will look into it thanks for the input. But does it make a difference if it is laravel mix? — Calixte Simeon
– Calixte Simeon, Commented Apr 3, 2018 at 15:55
@AjayGupta. I am using a mix of the laravel framework and react.js....Jquery is an automatic dependency, because bootstrap requires it. But I wouldn't be against learning Axios or Request. Different Hammer for same nail bro.So point me in the direction. — Calixte Simeon
– Calixte Simeon, Commented Apr 4, 2018 at 14:32

Tomasz Mularczyk · Accepted Answer · 2018-04-01 14:22:27Z

1

The problem is that this will reference an anonymous function not React Object you created:

$.ajax('/activeFilters',{    
    success: function(e){

        this.setActiveFilter(e);
    },

    error:function(e){
        alert(e);
    }
});

If you can use arrow functions try:

constructor(props) {
    super(props);
    this.state = {
        activeFilters: '',
        availableAttributes:[]
    };

    this.setActiveFilter = this.setActiveFilter.bind(this); // this will make setActiveFilter be called with scope of your component object.
}

componentDidMount() {    
    $.ajax('/activeFilters',{    
        success: (e) => {    
            this.setActiveFilter(e);
        },

        error:function(e){
            alert(e);
        }
    });
}

edited Apr 1, 2018 at 14:22

answered Apr 1, 2018 at 14:06

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Calixte Simeon Over a year ago

Yeah just tried that I before and copied and paste your answer still nothing I hate this at times...... Errors out of no where, should I screen shot the console errors?

Dave Newton Over a year ago

@CalixteSimeon No, errors are text. The problem is your understanding of JS and the late binding of 'this'.

Calixte Simeon Over a year ago

So. Ok cool I literally posted the entire file try and see if it runs. I don't know @DaveNewton everything but i know a little about OPP and especially 'this'. I tried several variation and your example was one of the first.I am just stating my results.

Calixte Simeon Over a year ago

TypeError: this.setActiveFilter is not a function[Learn More] app.js:36286:21 success 127.0.0.1:8000/js/app.js:36286:21 fire 127.0.0.1:8000/js/app.js:6467:11 fireWith 127.0.0.1:8000/js/app.js:6597:7 done 127.0.0.1:8000/js/app.js:12504:5 callback/< 127.0.0.1:8000/js/app.js:12747:9

Tomasz Mularczyk Over a year ago

@CalixteSimeon I have modified the answer, did you tried it?

|

Sakshi Nagpal · Accepted Answer · 2018-04-01 14:07:36Z

1

Currently you are calling setActiveFilter in global scope, not in the current component scope. Yo need to call function with current scope like:

this.setActiveFilter(e);

in success callback of your ajax call written in ComponentDidMount

answered Apr 1, 2018 at 14:07

Sakshi Nagpal

1,0437 silver badges16 bronze badges

2 Comments

Calixte Simeon Over a year ago

I tried this and it doesn't work at all. console returns error TypeError: this.setActiveFilter is not a function[Learn More] app.js:36286:21 success 127.0.0.1:8000/js/app.js:36286:21 fire 127.0.0.1:8000/js/app.js:6467:11 fireWith 127.0.0.1:8000/js/app.js:6597:7 done 127.0.0.1:8000/js/app.js:12504:5 callback/< 127.0.0.1:8000/js/app.js:12747:9

Sakshi Nagpal Over a year ago

You need to bind the function in constructor. this.setActiveFilter = this.setActiveFilter.bind(this)

Michal Cholewiński · Accepted Answer · 2018-04-01 14:23:18Z

1

You have to bind it in Your constructor

this.setActiveFilter = this.setActiveFilter.bind(this);

I'm pretty sure that it will help ;)

answered Apr 1, 2018 at 14:23

Michal Cholewiński

4642 silver badges14 bronze badges

Collectives™ on Stack Overflow

React component don't recognize function?

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related