realsimonburns realsimonburns - 3 months ago 15
React JSX Question

SetState Is Not A Function on OnChange

Working to get a slider to change the value of "text" in the React state.

Keep getting an error:

"App.js:90 Uncaught TypeError: this.setState is not a function" despite my best troubleshooting efforts.

What could the fix be?

class App extends Component {
constructor(props) {
super(props);
this.state = {list: [{x: "Before Pool", y:85000}, {x: "After Pool", y:82000}], text: 0, options: {bathrooms:'', bedrooms:'', sqft:''}};
}

componentDidMount() {
setTimeout(() => {
this.setState({list: [{x: "Before Pool", y:60000}, {x: "After Pool", y:30000}]});
console.log("testing", this.state.text);
}, 2000) ;
}
handleChange (event) {
console.log("from handle change", event);
this.setState({text : event });
}
render() {
return (
<div className="App">
<div>
<div style={wrapperStyle}>
<p># of Bathrooms</p>
<Slider min={0} max={20} defaultValue={3} onChange={this.handleChange} />
</div>


enter image description here
enter image description here

Answer

you need to bind the handleChange method

<Slider min={0} max={20} defaultValue={3} onChange={this.handleChange.bind(this)}