Cannot read property 'bind' of undefined React when all properties are defined

Question

I'm making a project in React but I get that error.

I don't understand why if all properties are defined.

Anybody knows what could be happening?

The code is following. It's just a component of Numbers where the properties are: the numbers which had selected, the number selected, the numbers used and the class name of the div since I had two different classes in the CSS.

import React, { Component } from 'react';

    export default class NumbersFrame extends Component {

      constructor(props){
        super(props);
        this.state = {
          numbers: [],
          selectNumber: this.props.selectNumber,
          usedNumbers: this.props.usedNumbers,
          selectedNumbers: this.props.selectedNumbers,
          className: null
        }
      }


        render = () => {
          for (var i=1; i <=9; i++){
            this.setState.className = "number selected-" + (this.state.selectedNumbers.indexOf(i)>=0);
            this.setState.className = this.state.className +  " used-" + (this.state.usedNumbers.indexOf(i)>=0);
            this.state.numbers.push(
                <div className={this.state.className} onClick={this.state.selectNumber.bind(null, i)}>
                  {i}
                </div>
              )
          }

          return(
            <div id="numbers-frame">
              <div className="well">
                {this.state.numbers}
              </div>
            </div>
            );
        }
      };

Answer 1

Change your render method: render = () => {

becomes render() {

Answer 2

Perhaps alluding to what Patrick mentioned, you should not be setting state inside of your render method. The callback for setState causes your component to re-render, so it is a circular reference. If you need to run setState once when the component first mounts, then you should do so inside of a different component event, such as:

componentDidMount = () => {
    this.setState([your new state]);
}

Also note that this.setState() is a function and not a property like this.state .

Answer 3

Solved but with a function

I've created a function in the main wrapper component instead of a component and this works.

Anybody knows why this could be?

function NumbersFrame (props) {

var selectNumber = props.selectNumber,
    usedNumbers = props.usedNumbers,
    selectedNumbers =  props.selectedNumbers,
    numbers = [], 
    className = null;

  for (var i=1; i <=9; i++){
    className = "number selected-" + (selectedNumbers.indexOf(i)>=0);
    className += " used-" + (usedNumbers.indexOf(i)>=0);
    numbers.push(
        <div className={className} onClick={selectNumber.bind(null, i)}>
          {i}
        </div>
      )
     }

  return(
      <div id="numbers-frame">
        <div className="well">
          {numbers}
        </div>
      </div>
      );
  }

Answer 4

I would suggest to make a method like 'setSelectedNumber(number)' or something.

As mentioned above really bad idea to set the data in the render method. I would use the componentDidMount or componentDidReceiveProps method.

And last but not least, to update the state use:

this.setState({‘selectNumbers’: value});

If you do this in a method like i mentioned above, don't forget to bind this to the method, otherwise the method will not contains a definition for this , so the setState method won't be available.

To bind this to a method do this in the constructor:

   this.methodname = this.methodname.bind(this);

Gl.