Reputation: 82
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
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
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
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