I Really Just Don't Understand What's Going On in React

I Really Just Don't Understand What's Going On in React
0

#1

Tell us what’s happening:

I’ve been able to figure out just about everything in FCC up until this point, whether from the lessons or from the forums if need be.

However, I honestly just have no idea what’s going on here. It’s probably the keyword “this” that is the clincher for me.

I just don’t understand what it’s referring to, and unfortunately, I can’t seem to find anything on the web that can explain it to me properly.

I bought a little react course on a separate site, since react is the only thing that’s causing me this problem, but honestly, I’ve built momentum with FCC and would just like to follow through.

Can someone please explain to me what is happening in this code? Like, I know line-by-line might be too much for everyone here, but literally, with the first ‘this’ on line 4 to the last ‘this’ on line 34, I just don’t get it.

I really have no idea what’s going on, for about the last 6 or so challenges …

Your code so far


class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    // change code below this line
    event.preventDefault();
    this.setState({
      submit: this.state.input
    });
    // change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          { /* change code below this line */ }
          <input value={this.state.input} onChange={this.handleChange}></input>
          { /* change code above this line */ }
          <button type='submit'>Submit!</button>
        </form>
        { /* change code below this line */ }
        <h1>{this.state.submit}</h1>
        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-controlled-form


#2

In order to understand React and the this keyword, you need to understand the concept of object-oriented programming, specifically the concept of classes versus objects.

Udacity has a free course on the subject, which I haven’t taken so I can’t speak to it personally, but looks like it covers what you need to know: https://www.udacity.com/course/object-oriented-javascript--ud711


#3

Basically, this is the thing to the left of the dot. It is the current context. There are some subtleties, but thats what it is at core

[1,2,3].push(4)

[1,2,3] is to the left of the dot, push is pushing 4 to this, this is [1,2,3].

A class is a blueprint for an object in JS: when you have MyClass, then new MyClass() will create a new object of the type MyClass. In the code for the class, this refers to the class itself.

This is complicated in JavaScript because of the fact the language has function scope. Whenever you create a new function, thisinside the function refers to that function (it’s another object, so this inside the function is going to refer to the function itself). [Arrow functions fix this, they have no this]

this is not React specific, it’s just JS, and it is central to how JS works.

There are a vast amount of resources on how this works in JS, and you should maybe go back through the OO JS part of FCC. React is not doing anything special here. It has a few specific functions and properties (they are defined in this case on React.Component, which is why you extend that into your class), but otherwise everything is just standard JavaScript. It does some magic with respect to the rendering, but the point of React is that you don’t have to worry about that - how it does that does not really have any bearing here.

So like (copied from MDN):

A class:

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

If I run

const george = new Animal('George')

george is going to be a reference to a new object:

{ name: 'George'
, speak: function() { console.log('George makes a noise'); } 
}

The constructor function is a way to set up some properties on the object, then I can define other functions that do things to those properties. It is just a function, you give it arguments and then use those arguments in the definition.

Notice how the this-prefixed property (this.name) is set to the argument given to the constructor function, and gets replaced with that in the object that gets created.

I can have a class which describes what an object should look like, and then I can inherit and override all of those object definition in another class using extend

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

So that gives me everything from Animal, and I’ve decided to override the speak to make it more dog-like. super is the function that grabs all the properties from the other class - it’s as if you’re calling the constructor for Animal before you define anything else specific to Dog

const harold = new Dog('Harold')

So harold looks like

{ name: 'Harold'
, speak: function() { console.log('Harold barks'); }
}

#4

Thank you!

This was very informative, in-depth, and logical!

I appreciate you so much!

I’m going over the code now line-by-line with this understanding and I’m starting to piece it together. There are some things that are still a little confusing, but for the most part, I do feel comfortable with the material now!

(P.S. I took a couple weeks off from FCC to clear my head after all of this. Glad to be back and welcomed with a thorough answer to what perplexed me!)

Thanks!