# 2003-GHP Cookie Jar: Fullstack Data Flow: Juke

Put your pending and outstanding questions here 👇
Make the question in H2 tag by using '##'

Example:

## What is JavaScript?

## Can you walk through what is the purpose of binding 'this' to react methods?

## Answer

Remember: React is like a fancy and extended JavaScript so we have to think about how JavaScript's `this` context works. In your repo, I added a [`this` review](https://github.com/FullstackAcademy/2003-GHP-NY-WEB-FT/tree/master/01-junior-phase/03-DOM/this-review) for more details.

So, let's actually look at what a `class component` looks like:

class SomeComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            someState: 'Some State'
        }
    }
    
    render() { // Render is something we get from React.Component
        <div>{this.state.someState}</div>
    }
}

As referenced above, React is fancy and extended JavaScript so above roughly translates to below plain JavaScript class (Note: Below class is extending another class with nothing in it just for demonstration purposes)

class SomeOtherClass {
    someFunction(){...}
}

class SomeClass extends SomeOtherClass {
    constructor() {
        super()
        this.someObject = {
            someStuffInObject: 'Some stuff in object'
        }
    }
    
    someFunction() {
        console.log(this.someObject.someStuffInObject)
    }
}

Let's trim the above class a bit to demonstrate the concept of `bind`

class DisplayName {
    constructor(name) {
        this.name = name
    }
    
    display() {
        console.log(this.name)
    }
}

const x = new DisplayName('Noelle')
x.display() // Noelle

// These two lines below simulate a "loss of the `this` context"
// This is synonymous to what we are doing when we do event handling in React
const y = x.display
y() // Uncaught TypeError: Can not ready property name of undefined


So, how do we fix this? By using `.bind` to bind the `this` context to the class

class DisplayName {
    constructor(name) {
        this.name = name
        this.display = this.display.bind(this) // Add this (lol)
    }
    
    display() {
        console.log(this.name)
    }
}

const x = new DisplayName('Noelle')
x.display() // Noelle

// Because we bound the this context to the class, it will refer to name in the class
const y = x.display
y() // Noelle


## I'm assuming this is the react cookiejar...why do you use this.props for class components and just props for functional components? Does it have to with this[property] syntax for classes?

## Answer

Yup! Please, refer to the question above this. I did an example of a `class component` and its equivalent in just a plain old JavaScript class. For reference, here's how it would look with `functional components`

// Function
const add = (x, y) => {
    return x + y
}
// Call it
add(2, 3)

// Functional Component file Add.js
const Add = (props) => {
    return <div>{props.x + props.y}</div>
}

export default Add

// In some other component file called Main.js

import Add from ./Add

const Main = () => {
    // "Call" the add component. We are passing 2 and 3 as props!
    return <Add x={2} y={3} />
}

## In the example below, is the SingleAuthor component above an instance/object of the class SingleAuthor or is the component the actual class?

class SingleAuthor extends React.Component
<SingleAuthor />

## Answer

Yes an instance! But don't describe them as instances in industry. They are just components! Speaking of industry, us engineers frequently look things up. Somethings like these are in documentation, which in fact we can go into more detail by looking at this from the offical React Documentation/Blog: [React Components, Elements and Instances](https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html). And if we Googled "Is a React component a class instance", the first result is above page!