Why do I get logic is not defined in this code

Question

I am new to JS and React and the error I faced is

"logic is not defined".

class Keyboard extends React.Component {
  logic() {
    return false;
  }

  render() {
    return (
      <div>
        <h1>{logic() ? "Yeah" : "Nooo"}</h1>
      </div>
    );
  }
}

const box = document.querySelector(".mir");

ReactDOM.render(<Keyboard />, box);

Possible duplicate of [Why do I get log is not defined](https://stackoverflow.com/questions/57536655/why-do-i-get-log-is-not-defined) — jonrsharpe, Aug 18 '19 at 09:40

ravibagul91 · Accepted Answer · 2019-08-17T15:23:40.943

1

You should use instance method using this,

<h1>{this.logic() ? "Yeah" : "Nooo"}</h1>

If you are calling another instance method in logic function, or you need to set state in logic function, in that case only you need to bind this to function in constructor,

constructor(props){
   super(props);
   this.logic = this.logic.bind(this);
}

edited Aug 17 '19 at 15:23

answered Aug 17 '19 at 15:18

ravibagul91

20,072
5
36
59

but what "this" refers to since I do not use like const board = new Keyboard(). I do not use NEW keyword why this refers to Keyboard object without using NEW keyword – Mirzhal Aug 17 '19 at 15:22
This is the way in React to call instance methods. – ravibagul91 Aug 17 '19 at 15:23
what do you mean? you mean ?? – Mirzhal Aug 17 '19 at 15:25
Keyboard is your class and logic is your instance method. To use instance method in your class you need to use `this`. – ravibagul91 Aug 17 '19 at 15:26
@Mirzhal, To know moe about this refer this - https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480 – ravibagul91 Aug 17 '19 at 15:32

score 0 · Answer 2 · edited Aug 17 '19 at 15:26

0

You should put the "this" keyword before any methods that is declared inside the class component

 <h1>{this.logic() ? "Yeah" : "Nooo"}</h1>

edited Aug 17 '19 at 15:26

Jonas Wilms

132,000
20
149
151

answered Aug 17 '19 at 15:24

hendriagustino

1
1

score -1 · Answer 3 · answered Aug 17 '19 at 15:22

Bind functions in the constrcutor and access it using this.

class Keyboard extends React.Component {
  constructor(props){
    this.logic = this.logic.bind(this);
  }
  logic() {
    return false;
  }

  render() {
    return (
      <div>
        <h1>{this.logic() ? "Yeah" : "Nooo"}</h1>
      </div>
    );
  }
}

const box = document.querySelector(".mir");

ReactDOM.render(<Keyboard />, box);

Why do I get logic is not defined in this code

3 Answers3