CODEWITHSUNDEEP
javascriptreactjsreact-state
Rait
Rait

Reputation: 5

Setting a state in ReactJS gives me: Cannot read property 'setState' of undefined

Can not setState property it is somehow undefined

Doing a this.spin = this.spin.bind(this) in constructor gives me a Cannot read property 'bind' of undefined and doing an arrow function for spin gives me Failed to compile

import React  from 'react';
function getSeed() {
    return Math.floor(Math.random() / 2)
}
var seed = getSeed();
function spin(timer) {
    var number = timer + [i] * 0.5;
    this.setState({number: number});
}
class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        number:"",
      }
    };
      return (
      <div id="root"></div>
    );
}
export default App;

Upvotes: 0

Views: 100

Answers (4)

Ikhsan Mahendri
Ikhsan Mahendri

Reputation: 143

Try like this if you when use react class

import React  from 'react';
class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        number:"",
      }
    };

    getSeed = () => {
       return Math.floor(Math.random() / 2)
    }

    spin(timer) = () => {
        this.setState({number: timer + [i] * 0.5});
    }
    render(){
        return (
           <div id="root"></div>
        )
    }
}

export default App;

if you use react hook

import React, {useState}  from 'react';
const App = () => {
    const [number, setNumber] = useState(0)
    const getSeed = () => {
       return Math.floor(Math.random() / 2)
    }

    const spin(timer) = () => {
        setNumber(timer + [i] * 0.5);
    }
    return (
       <div id="root"></div>
    );
}
export default App;

Upvotes: 1

harisu
harisu

Reputation: 1406

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        number:"",
      }
    };
   getSeed() {
     return Math.floor(Math.random() / 2)
   }
   let seed = getSeed();
   spin(timer) {
//[i] is not defined and it will fail so I am replacing it with  let number = timer * 0.5;
   let number = timer * 0.5;
   this.setState({number: number});
   }
   render(){
    return (
      <div id="root"></div>
    );
  }
}
export default App;

Upvotes: 1

syjsdev
syjsdev

Reputation: 1336

try like this

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: null,
    }
    this.getSeed = this.getSeed.bind(this);
    this.spin = this.spin.bind(this);
  };

  getSeed () {
    return Math.floor(Math.random() / 2)
  }

  spin (timer, i) {
    var number = timer + [i] * 0.5;
    this.setState({
      number: number
    });
  }

  render() {
    var v_seed = this.getSeed();
    return (
      <div>
        <button onClick = { (e) => this.spin(12, 12)} > Click here </button>
        <div>{`${v_seed} ${this.state.number}`}</div>
      </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Upvotes: 0

Beginner
Beginner

Reputation: 9095

in your code snippet, render was not there and moved the spin function inside class, I hope this will solve the issue.

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: ""
    };
    this.spin = this.spin.bind(this);
  }

 spin(timer) {
     //logic
  }

  render() {
    return <div id="root"></div>;
  }
}
export default App;

also you can use arrow function as shown below, in this case you dont want to do the bind in constructor.

also if you are using latest version you dont want to use constructor, its already taken care by babel. you can read here more about it 

spin = () => {}

Upvotes: 0

Related Questions