- State is stored as this.state and further changes in state are bought via this.setState.
- Using useState()
- Returns the current state.
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
- By using
this.state
andsetState
- using
useState
hooks - returns current state and function after update
- How do we store state in class-based components?
- It is initially defined in the constructor as this.state object.
this.state = {
name: "Mary"
}
- How do we store state in functional components?
- As variables, to which we assign values with useState method.
const name = useState ("Mary");
- What is the return value of a useState call?
- The value that the variable contains at the current state.
- 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.
- What is the return value of a useState call?
useState call returns the current state and a function that update it.
- By using the state property to map values.
- By creating variables.
- It returns the current/new value of a given state variable that it is assigned to.
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.
- How do we store state in class-based components?
export default class Greeting extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ‘Mary’ ,
}
}
}
- How do we store state in functional components?
export default function Greeting(props) {
const [name, setName] = useState(‘Mary’);
}
- What is the return value of a useState call?
The return value of a useState call is the current state.
- this.state - setState
- useState
- current state
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.
- In class-based components we store state by first initialising it in the constructor and then making updates by calling ‘this.setState()’.
- In functional components we store state by using hooks which are React functions that manage the state.
- 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.
-
*How do we store state in class-based components?
We initialize state withthis.state
in the class constructor and update state withthis.setState()
. -
How do we store state in functional components?
We useuseState
, 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");
-
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.
- We store state in class-based component as follows:
this.state = {
foo: 'bar',
}
function handleBaz (event) {
this.setState({
foo: event.target.value
})
}
- We store state in functional components using hooks, as follows:
const [foo, setFoo] = useState('bar');
function handleBaz (event) {
setFoo(event.target.value);
}
- The
return
value of auseState
call is the current value of that state, and a function that updates that state.
- in the class constructor, there will be a section that initializes this.state with a key-value list of state variables.
- global variables or class state variables traditionally.
- the state key-value list of the React local state.
- How do we store state in class-based components?
constructor(props) {
super(props);
this.state = {
someProp: this.props.someProp
}
}
- How do we store state in functional components?
import React, {useState} from 'react';
.
.
.
const [name, setName] = useState('Initial Value');
-
What is the return value of a useState call?
It returns a pair of values: the current state and a function that updates it.
- First It is defined initially in the constructor as an object
ex:this.state
and then changes of the state can be done by usingthis.setState
- By using useState aka hook
ex:const [name, StateName] = useState("Ishoboy");
- The return value of useState is its current state.
- 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.
- 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
-
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()”. -
How do we store state in functional components?
By using a hook like in the video demonstration. Using useState(). -
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.
-
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.