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

cannot read property of undefined typescript
cannot read property of undefined react
error typeerror: cannot read property of undefined
uncaught typeerror: cannot read property of null
cannot read property 'value' of undefined angular 7
cannot read property of undefined jquery
cannot read property of null typescript
cannot read property 'update' of undefined

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>
            );
        }
      };

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

becomes render() {

How to avoid 'cannot read property of undefined' errors?, Uncaught TypeError: Cannot read property of undefined. JavaScript TypeError is thrown when an operand or argument passed to a function is incompatible with the type expected by that operator or function. This error occurs in Chrome Browser when you read a property or call a method on an undefined object . Uncaught TypeError: Cannot read property of undefined In JavaScript. ‘Undefined’ is the property of the global object. If you don’t assign any value to a

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.

JavaScript Error Handling - X Is Not a Function TypeError, Seems like one of your values, with a property key of 'value' is undefined. Test that i1 , i2 and __i are defined before executing the if statements: ERROR in Cannot read property 'flags' of undefined. Ask Question Asked 2 months ago. Active 2 months ago. Viewed 2k times 4. When I run ng serve , I get the following

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>
      );
  }

Uncaught TypeError: Cannot read property 'foo' of undefined.​ The dreaded error we all hit at some point in JavaScript development. Could be  Getting Cannot read property 'js' of null on initial run with npm start but the error goes aways if I make change to any file. But when trying to create a production build with npm run build the same error shows up and fails the build.

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.

A quick workaround is using a try/catch helper function with ES6 arrow function: function getSafe(fn, defaultVal) { try { return fn(); } catch (e) { return defaultVal; } } // use it like this getSafe(() => obj. Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question.Provide details and share your research! But avoid …. Asking for help, clarification, or responding to other answers.

Every developer who did some JavaScript has got errors like “Cannot read property '…' of undefined”. There is one simple way to prevent them,  Uncaught TypeError: Cannot read property of undefined In JavaScript. Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as Undefined.

TypeError: Cannot read property 'map' of undefined. TL;DR - If you are not in the mode for reading or you just want the bottom line, then here it  Will second @bluemoehre here: following the quickstart to the letter, getting a Cannot read property 'on' of undefined.My setup is ArchLinux, node is managed by nvm: nvm --version 0.33.2 node --version v8.1.0

This error is because there is a property field in that model, on that form that doesn't have his generic value defined, probably someone delete it. you should be  everytime when i try to change somthing in the Alertbox they show me “ Please enter a number greater than or equal to 0” or “ cannot read property ‘settings’ of undefined” icon Best answer by Castorr91 21 December 2019, 14:54

Comments
  • what is the value of this.props.selectNumber inside the constructor?
  • You definitely shouldn't be setting state that way, especially inside render(). Please see Do Not Modify State Directly. Also, setState() is a method that accepts arguments for en-queuing changes to the component's state.
  • Just a tip. you do not need to add the props properties in your state. if the parent passes new props the component will rerender so you do not need them in the state.
  • you should also not be attempting to change the state that way.
  • What do you suggest me to do instead?
  • Still getting the same error after change to render() {
  • Have a read of this content: reactjs.org/docs/…. But also you probably don't need state at all. Your selected numbers already comes as a prop so you could just iterate over them in the render method {this.props.selectedNumbers.map(selectedNumber => { ...do something })
  • Then the issue is with doing .bind on selectNumber. selectNumber is either undefined when the component is initialized (i.e. there isn't a prop) or has been mutated in such a way that it has become undefined.