Event binding - Dan Abramov Conference talk

[gregD]

1. We store state in class based components as an object ‘this.state’ and we can call the setState() method to change it.

2. Functional components remove the need for binding as the state is stored using the useState() hook.

3. A useState() call returns 2 values. The current state and a function that updates it.

[VBence99]

1. We store the state as a property of an object by using this.state and later we can modify it by using this.setState.

2. We use the useState hook.

3. A useState call returns the current state and also a function that updates he state.

[Acex13]

• How do we store state in class-based components?
  In class-based components, state is always an object, so we use this.State, and change the state with this.setState.

• How do we store state in functional components?
  We use the hook called useState, declaring state variables

• What is the return value of a useState call?
  The return value is the current state and the updating function.

[Kippie]

1. We store state in class-based components as props in this.state and update the state with this.setState()
2. We store state in functional components by utilizing react hooks; declaring a const with useState(initial value)
3. The return value of a useState call is both the current state and the setter function which updates it.

[tony1999]

1. this.state and this.setState
2. useState()
3. The current state and a setter function

[Ernest_SG]

1. How do we store state in class-based components?

The state is stored in the class object state inside the constructor function and this can hold multiple key: value properties, if we want to modify the state we would have to use the setState() method

2. How do we store state in functional components?

State is stored by using the useState() hook to store the state in a variable

3. What is the return value of a useState call?

It returns the current state of the components and a function that sets the new state.

[dani88]

1. How do we store state in class-based components?

State is managed within the component, and can be manipulated with the keyword: this.setState({})

A. Create a state object and initialize it inside the class constructor.
B. Call the super method because we will extend the component class and call the base class constructor.
C. Create state object this.state =
D. Initialize the state’s property with a message
E. Bind the state value in the render function after return({bind here -> this.state.message})
F. Create a click event that will change the state using keyword this.setState (without set.state, the UI will not change.)

Here’s the example given:

this.handleNameChange = this.handleNameChange.bind(this);

handleNameChange(e) {

this.setState({

Name: e.target.value

});

}

A more simple example:

changeMessage(){

Return (

the new statement

)

}

2. How do we store state in functional components?

import useState hook

Hooks can only be used in a function component

Hooks must all run in the same order can’t use

if statement,

functions or loops.

Top level only

In the function curly braces, add a constructor with an array containing both the state, whatever that is.

Use setState - Could be setCount in a function to change the value

3. What is the return value of a useState call?

The return value of a useState call is set in the constructor and can be changed by functions with hooks, or can be changed by set.State keyword and bindings in classes.

[DJaySplash]

1. We store state using the this.state for components
2. We have to use arguments to store state in functional components. The easiest most simplified way to do that is through the useState() function and hooks.
3. The return value is the updated data retrieved by the change.

[bjamRez]

1. 1. How do we store state in class-based components?
      we use the setState hook
2. 1. How do we store state in functional components?
      useState hook
3. 1. What is the return value of a useState call?
      an array of two entries
      a) the value returned by the function will be used as initial state
      b) second is a function used to update the state

[theaussie86]

1. It is stored in the state property of the class component
2. It is stored as a variable with useState()
3. The return value is the stateful variable after the update

[Dexda]

1. this.state
2. useState
3. current state + function

[Markus_Bielaszka]

1. How do we store state in class-based components?

We use this.state.something to store the state and this.setState({ ... to update the state.

2. How do we store state in functional components?

We use useState(theValue) to store the state in a functional component.

3. What is the return value of a useState call?

It returns a value that we set const [value, setValue] value is the current value and setValue is a function that let’s us set the value.

[KK_Cheah]

1. How do we store state in class-based components?
   using this.state to store initial state while this.setState to update states

2. How do we store state in functional components?
   using useState() for initial state and useEffect to for side effects

3. What is the return value of a useState call?
   first value is the initial/current state while the second is the updated state

[Maia]

1. State is stored in class-based components in this.setState and can be further updated in setState()
2. State is stored in functional components in useState()
3. The return value is a pair where the first, it’s the current State value and the second, it’s a function that allows you to update it.

[diegosan]

How do we store state in class-based components?
We create a state object and bind the event handler so we can access it inside the event handler
We use setState() to merge a value into that object
We access it with this.state.key value

How do we store state in functional components?
With useState().

What is the return value of a useState call?
The return value is the current value of a variable that we declare in our functions

[Astro]

1. By storing values in this.state.

2. By using the useState hook.

3. The current state and an update function to update the state.

[crypto-djent76]

1. How do we store state in class-based components?

The state object is where you store property values that belongs to the component. In this respect, it would be `this.state` or `this.setState`.

2. How do we store state in functional components?

Hooks declare a state variable between function calls. In this respect, the `useState()` call is the function used.

3. What is the return value of a useState call?

It returns values from the 'useState()' function and the current state value.

[alp257]

How do we store state in class-based components?

• By initializing a special property as an object in the constructor of the class

How do we store state in functional components?

• Declaring a state variable and a set state variable then using useState hook

What is the return value of a useState call?

• returns the current state and a function to update the state

[CryptoUsic]

1. How do we store state in class-based components?
   As an object in this.state
2. How do we store state in functional components?
   Using the useState hook
3. What is the return value of a useState call?
   current state and setter

[diehlca17]

1. In constructor and with lifecycle functions
2. hooks
3. current state after state is changed