realsimonburns realsimonburns - 11 months ago 45
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) {
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 style={wrapperStyle}>
<p># of Bathrooms</p>
<Slider min={0} max={20} defaultValue={3} onChange={this.handleChange} />

enter image description here
enter image description here

Answer Source

you need to bind the handleChange method

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