Authorization Form Question

Hey all - just want to make sure I understand what’s going on here. Code below:

import React from 'react';
import ReactDOM from 'react-dom';

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      password: 'swordfish',
      authorized: false
    };
    this.authorize = this.authorize.bind(this);
  }

  authorize(e) {
    const password = e.target.querySelector(
      'input[type="password"]').value;
    const auth = password == this.state.password;
    this.setState({
      authorized: auth
    });
  }

The use of this in this.state and this.authorize while within the constructor() function but after super means that props has a state and authorize property that we can’t see, but we know is being inherited from props. Is this right?

What is confusing me is referencing this.authorize before we define the authorize() method right below it.

I’m also confused about the syntax and meaning of the .bind property, but perhaps this is yet another method hidden in the props class we inherited through constructor.

Am I on the right track? Any clarity is greatly appreciated!

NOTE: This code was all pre-written by the platform. I can’t go and see what’s being inherited through super.

1 Like

I’m wondering about the same things, hope someone will answer!?

1 Like

So, from what I understand, it’s about from where authorize is called, which is from inside a <div> in our render method.

Apparently, this <div> is an object itself, and so being it will look for a this.authorize within itself when this.authorized is called within <div> as a handler.

By using .bind(), we bind authorize’s ‘this to always mean our class.

Again, that’s what I gathered from asking a firend. This may be veeeery superficial and maybe even not that accurate, but I thought it could help.

1 Like