what is const [isOpen, setOpen] = useState(false);
I saw in this tutorial
What is meant when we pass false as an argument in useState and what is [isOpen, setOpen]
what is const [isOpen, setOpen] = useState(false);
What is meant when we pass false as an argument in useState and what is [isOpen, setOpen]
useState
is a function that returns a two element array. First element is a value, second element is a function that sets a new value. The argument given to the function is the initial value.
Then you can use the value and the setter function in your component – the value will start off as false
, then you can use the setter to toggle the value
function Example() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<p style={{ visibility: isVisible ? "visible" : "hidden" }}>HELLO</p>
<button onClick={() => setIsVisible(!isVisible)}>Toggle visibility</button>
</div>
)
}
The p element with “HELLO” starts off hidden. Click the button, isVisible
toggles to true
, p element is visible. Click it again, isVisible
toggles to false
, p element is hidden again, etc.
Working example: lucid-microservice-ndrrbv - CodeSandbox
It works basically like this:
// somewhere in the react code a reference to
// the current rendered component we're
// looking at
let currentComponent;
// And map of
// rendered components -> their state
const componentStates = new Map()
// Then this is the function:
function useState(initialState) {
// If the current rendered component isn't
// in that map, add it and set the state
if (componentStates.has(currentComponent) === false) {
componentStates.set(currentComponent, initialState);
}
// Then return a two-element array with
// the current state plus a function to update
// the map of states
return [
componentStates.get(currentComponent),
(newState) => componentStates.set(currentComponent, newState
];
}
Edit: also, this
const [isOpen, setOpen] = useState(false)
Is same as
const openstate = useState(false);
Then using openstate[0]
to access the value and openstate[1]
to access the setter function, eg
const openstate = useState(false);
const isOpen = openstate[0];
const setOpen = openstate[1];
That’s just not as clear though. See Destructuring assignment - JavaScript | MDN
This is known as state in React.
and in the following example the initial state (isOpen) holds false value.
Probably the use in this particular case is to toggle .
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.