Event binding - Dan Abramov Conference talk

  1. State is stored as this.state and further changes in state are bought via this.setState.
  2. Using useState()
  3. Returns the current state.
3 Likes

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

We store state with “this.state”

2. How do we store state in functional components?

useState()

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

the current state

2 Likes
  1. By using this.state and setState
  2. using useState hooks
  3. returns current state and function after update
2 Likes
  1. How do we store state in class-based components?
  • It is initially defined in the constructor as this.state object.
this.state = {
   name: "Mary"
}
  1. How do we store state in functional components?
  • As variables, to which we assign values with useState method.
const name = useState ("Mary");
  1. What is the return value of a useState call?
  • The value that the variable contains at the current state.
2 Likes
  1. How do we store state in class-based components?
    Using this.state (object)and this.setState

2, How do we store state in functional components?
In functional component ,we use react state hook to store the states.

  1. What is the return value of a useState call?
    useState call returns the current state and a function that update it.
3 Likes
  1. By using the state property to map values.
  2. By creating variables.
  3. It returns the current/new value of a given state variable that it is assigned to.
2 Likes

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

  • State is stored as properties in class variables this.state
  • The initial state can be set in the constructor by directly setting this.state
  • Changes to state through function call this.setState()

2. How do we store state in functional components?

  • Through binding state variables with useState(varName)

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

  • The current state and a function that updates it.
1 Like
  1. How do we store state in class-based components?
export default class Greeting extends React.Component {
     constructor(props) {
          super(props);
          this.state = {
               name: ‘Mary’ ,

          }
     }


}
  1. How do we store state in functional components?
export default function Greeting(props) {
	const [name, setName] = useState(‘Mary’);



}
  1. What is the return value of a useState call?

The return value of a useState call is the current state.

1 Like
  1. this.state - setState
  2. useState
  3. current state
1 Like

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

We can assign an object to the state property in the constructor.
this.state = { key:"value" }

2. How do we store state in functional components?

We can use “hooks” to store and change state in functional components. We can import the { useState } hook in the JS file and then in the functional component we declare a state variable with the useState hook:
let [anyThing, functionName] = useState('initialValue');

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

The return value of useState is the current value of the associated state name.

2 Likes
  1. In class-based components we store state by first initialising it in the constructor and then making updates by calling ‘this.setState()’.
  2. In functional components we store state by using hooks which are React functions that manage the state.
  3. The return values of a useState call is the state value which is set and a function that updates the value of state when called throughout the component.
2 Likes
  1. *How do we store state in class-based components?
    We initialize state with this.state in the class constructor and update state with this.setState().

  2. How do we store state in functional components?
    We use useState, which takes the initial state as an argument the first time it is called and returns a pair of values (the initial state and a function to update the state) and assign these values to variables of our choice using the array destructuring syntax. E.g.:

    const [name, setName] = useState("Nara");

  3. What is the return value of a useState call?
    useState returns a pair: the current state value and a function that lets you update it.

1 Like
  1. We store state in class-based component as follows:
this.state = {
    foo: 'bar',
}

function handleBaz (event) {
    this.setState({
        foo: event.target.value
    })
}
  1. We store state in functional components using hooks, as follows:
const [foo, setFoo] = useState('bar');

function handleBaz (event) {
    setFoo(event.target.value);
}
  1. The return value of a useState call is the current value of that state, and a function that updates that state.
3 Likes
  1. in the class constructor, there will be a section that initializes this.state with a key-value list of state variables.
  2. global variables or class state variables traditionally.
  3. the state key-value list of the React local state.
1 Like
  1. How do we store state in class-based components?
constructor(props) {
        super(props);
        this.state = {
            someProp: this.props.someProp
        }
    }
  1. How do we store state in functional components?
import React, {useState} from 'react';
.
.
.
const [name, setName] = useState('Initial Value');
  1. What is the return value of a useState call?
    It returns a pair of values: the current state and a function that updates it.
2 Likes
  1. First It is defined initially in the constructor as an object
    ex: this.state and then changes of the state can be done by using this.setState
  2. By using useState aka hook
    ex: const [name, StateName] = useState("Ishoboy");
  3. The return value of useState is its current state.
2 Likes
  • How do we store state in class-based components?
    Using this.state and this.setState
  • How do we store state in functional components?
    we can use hooks
  • What is the return value of a useState call?
    Return the current state and a function that updates it.
1 Like
  • How do we store state in class-based components?
    We can store the state object in this.state.
  • How do we store state in functional components?
    We use the useState hook.
  • What is the return value of a useState call?
    It returns a variable with the current state value and a function to update this value
2 Likes
  1. How do we store state in class-based components?
    By using " this.state. “. You will then be able to set the state using " this.setState()”.

  2. How do we store state in functional components?
    By using a hook like in the video demonstration. Using useState().

  3. What is the return value of a useState call?
    The actual state, and a function that loads/updates the new value that we give to it.

3 Likes
  • How do we store state in class-based components?
    Initialize with this.state and store with this.setState

  • How do we store state in functional components?
    useState

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

2 Likes