CODEWITHSUNDEEP
reactjslaravel-mix
Calixte Simeon
Calixte Simeon

Reputation: 82

React component don't recognize function?

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?

Upvotes: 0

Views: 2016

Answers (3)

Michal Cholewiński
Michal Cholewiński

Reputation: 464

You have to bind it in Your constructor

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

I'm pretty sure that it will help ;)

Upvotes: 1

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36219

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

Upvotes: 1

Sakshi Nagpal
Sakshi Nagpal

Reputation: 1043

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

Upvotes: 1

Related Questions