Manage your learning questions and answers
State that is computed from an existing piece of state or from props by creating regular variables (no useState) because if we created separate states then we would have to keep them in sync and we would have many re-renders.
When we need to share State data from a component to another, but they are not parent to sibling (because lifting up state is when the state is needed in a sibling component not parent), so we move the state to the closest common parent for the two sibling components.
Local state is where state needed only by one or few components, and it's defined in a component and only that component and child components have access to it (by props). While Global state is where state needed by many components, and it's shared and accessible to every component in the entire application.
I create the state, then add the value as value property, and listen on form with onChange, and pass in the event in order to set the state with the value of target event.
<input
type="text"
placeholder="Write the item here..."
value={description}
onChange={(e) => setDescription(e.target.value)}
></input>I create an array using Array.from({length: 20}) which will create an array with 20 placeholders, then I will add to it a mapping function to map over the 20 placeholders and create 20 options for select element, so it will be: Array.from({length: 20}, (_, i) => (<option>{i + 1}</option>)). Of course not to forget key={i} and value={i + 1}.
<select>
{Array.from({ length: 20 }, (_, i) => (
<option key={i} value={i + 1}>
{i + 1}
</option>
))}
</select>I use style tag and I open JS mode, and add the ternary operator check for the condition, and return the object as the result of condition, if I wanted a condition to have no styling I would return an empty object, because style tag expects an object.
<span style={itemObject.packed ? { textDecoration: "line-through" } : {}}>
{itemObject.quantity} {itemObject.description}
</span>I use a function and pass to it currentState/Value so that if the process is repeated React does not batch the state updates and it actually uses the current state/value to update the UI.
{/* using function */}
function handleMinus() {
if (count > 0) setCount((currCount) => currCount - 1);
}
{/* without function */}
function handleMinus() {
if (count > 0) setCount(count - 1);
}Because if we update it manually we mutate the state while React is all about immutability, which is why useState hook was provided.
Updating component state triggers React to re-render the component to keep the user interface in sync with data.
To prevent immediate execution, and to allow passing arguments or event object (e), when passing a reference React will call the function when needed.
{/* myFunction() runs immediately when react renders the component, not when the button is clicked */}
<button onClick={myFunction()}>
{/* now you’re giving react a reference to the function, react will call it later when the click happens */}
<button onClick={myFunction}>Because if we used && and the condition is false, then className will equal to false, it has no effect on UI, but it's not best practice, returning empty string from a ternary operator is cleaner.
{/* this will return false if step does not equal 1 */}
<div className={step === 1 && "active"}>1</div>
{/* this will return nothing (empty string) if step does not equal 1 */}
<div className={`${step >= 1 ? "active" : ""}`}>1</div>The && (logical AND) operator is useful when you want to conditionally render something if a condition is true. If the left side (condition) is truthy, React will render the right side. If the left side is falsy, nothing is rendered.
{/* if isLoggedIn is true, <LogoutButton /> is rendered */}
{/* if isLoggedIn is false, react renders nothing (false is ignored) */}
{isLoggedIn && <LogoutButton />}