revising useState hook

• array destructuring - get individual items from an array and save as separate component

  

• destructure useState using [variable, setVariable function]

  const [stateValue, setStateFunction] = useState(initialState);

  • The useState hook’s return value in React is the array data structure.
  • The useState hook allows you to work with state in components.
  • The useState hook invocation returns a two-member array.
  • When using the useState hook, you must use the state-updating function to update state.

  

complex data in useState

• the suggested approach for updating the state object in React when using useState is to copy the state object and then update the copy.

• This usually involves using the spread operator (...)

  import { useState } from "react"; 
   
  export default function App() { 
    const [greeting, setGreeting] = useState({ greet: "Hello, World" }); 
    console.log(greeting, setGreeting); 
   
    function updateGreeting() { 
      const newGreeting = {...greeting}; 
      newGreeting.greet = "Hello, World-Wide Web"; 
      setGreeting(newGreeting); 
    } 
   
    return ( 
      <div> 
        <h1>{greeting.greet}</h1> 
        <button onClick={updateGreeting}>Update greeting</button> 
      </div> 
    ); 
  } 
  

• changing specific property of state object using arrow function

  import { useState } from "react"; 
   
  export default function App() { 
    const [greeting, setGreeting] = useState( 
      { 
          greet: "Hello", 
          place: "World" 
      } 
    ); 
    console.log(greeting, setGreeting); 
   
    function updateGreeting() { 
      setGreeting(prevState => { 
          return {...prevState, place: "World-Wide Web"} 
      }); 
    } 
   
    return ( 
      <div> 
        <h1>{greeting.greet}, {greeting.place}</h1> 
        <button onClick={updateGreeting}>Update greeting</button> 
      </div> 
    ); 
  } 
  

using useState

lab: managing state within a component

• steps

import { useState } from "react";

export default function App() {
  const [giftCard, setGiftCard] = useState(
    {
        firstName: "Jennifer",
        lastName: "Smith",
        text: "Free dinner for 4 guests",
        valid: true,
        instructions: "To use your coupon, click the button below.",
    }
  );

  function spendGiftCard() {
    setGiftCard((prevState) => {
      return {
        ...prevState,
        text: "Your coupon has been used.",
        valid: false,
        instructions: "Please visit our restaurant to renew your gift card.",
      };
    });
  }

  return (
    <div style={{padding: '40px'}}>
      <h1>
        Gift Card Page
      </h1>
      <h2>
        Customer: {giftCard.firstName} {giftCard.lastName}
      </h2>
      <h3>
        {giftCard.text}
      </h3>
      <p>
        {giftCard.instructions}
      </p>
      {
        giftCard.valid && (
          <button onClick={spendGiftCard}>
            Spend Gift Card
          </button>
        )
      }
    </div>
  );
}

practice assignment

• valid useState invocation and destructuring
  • const [car, setCar] = useState({ color: 'blue', mileage: 0})
• const [person, setPerson] = useState({ name: 'John', age: 21}) → ****update age to 22 in person state variable
  • setPerson(prev ⇒ ({ …prev, age:22}));