• Understand what is hook in general,
• useState() and how to use it
• Lifting state
• Reusable components
• Create a form and handle input
• React bootstrap

What is react hooks ?

A hook in a React component is a call to a special function.

All hooks functions begin with the word "use"

There are many hooks, some can be used to provide a function component with stateful elements (like useState), others can be used to managed side effects (like useEffect) or to cache/memoize functions and objects (like useCallback)

In this course, we mostly focus on those two useState and useEffect

useState()

• Before that, we have to know what is state?

In function component, state is a variable that stores the value belonging to a component that could change over a period of time. And when the state change, the component that contain the state re-render

• useState

useState is a Hook that lets you add React state to function components.

const [state, setState] = useState(initialValue);

• What does useState return?
  • It returns a pair of values: the current state and a function that updates it
• What do we pass to useState as an argument?
  • The only argument to the useState() Hook is the initial state which is called initialValue
  • Data type of the initialValue? Each piece of state holds a single value, which can be a number, a string, object, an array, a Boolean, or any other type.
  • The initialValue will only be assigned on the initial render. In later renders, the argument of useState() will be ignored and the current value will be the one retrieved.
  • setState(): we can't expect to call setState() on one line and assume the state has been updated on the next line. The reason is that setState() is a mere request to update state rather than an immediate command to update it.
• Hook rules:
  • Should be write in the order and can't be nested into any statement like if, loop.

How to useState ?

We now want to build an small React application to see how useState work.

• First thing first, create a new folder

  mkdir week-5
  cd week-5
  mkdir tuesday
  cd tuesday
  mkdir usestate-demo
  cd usestate-demo
  

• Create a react app

  npx create-react-app .
  

• App.js:

  import "./App.css";
  
  function App() {
    let count = 0;
    return (
      <div className="App">
        <h1>Demo useState</h1>
        <div>{count}</div>
      </div>
    );
  }
  
  export default App;
  

• Add an event handler onClick, give it a function that alert an hello message to the user. Fire the event with a click to see if onClick work well

  const handleAdd = ()=>{
  	alert("Hello Jaguar")
  }
  ...
  <div>{count}</div>
  <button onClick={handleAdd}>+</button>
  

• To track state updates, React needs to be aware of any changes that happen to any state elements that are used within components. To do this in an efficient way, React requires the use of special getters and setters for each state element you introduce in a component. This is where the useState hook comes into play.Adding state to the component:

  import {useState} from "react"
  ...
  const [count, setCount] = useState(0);
  

• Reading state: render the the state value to the UI

  <div>{count}</div>
  

• Updating state:
  • Now we need to make the adding button is to invoke the setCount function within the onClick event and pass the current count value incremented by 1 to the state count

  const handleAdd = () => {
    setCount(count + 1);
  };
  

Exercise 1: now it's your turn to create an decrement button.

We are now so far working with the our main component: App. Let's split the code into smaller components: the Button component and the Result component:

• Button component represent a button element
• Result component display the count's value.

Create a folder components inside src folder

Inside components, create two new js file: Button.js and Result.jsI

In Button.js

const Result = () => {
  let count = 0;
  return <div>{count}</div>;
};

export default Result;

In Result.js

const Button = () => {
  return <button>+</button>;
};

export default Button;

• Later on, you can use the shortcut inside a js file: rafce to get the sample template of a function component (hint to remember: you should know what is rafce stand for)

Import those two component into the top-level component of them: App.js

In App.js:

import Button from "./components/Button";
import Result from "./components/Result";
...
return (
    <div className="App">
      <h1>Demo useState</h1>
      <Result />
      <Button />
    </div>
  );

Now, we want our new app work exactly the same with the old on. How can we manage the state of these components?

Button and Result components need access to the count state element. The Result component will display it and the Button component will update it.

When a component needs to access a state element that's owned by its sibling component, one solution is to "lift" that state element one level up and define it inside their parent component. For this case the parent is the App component.

Exercise 1: make the decrement button with same logic.

First, look carefully the code below to understand more about lifting state and make your own version follow the step that I just demo, then try to implement to the Exercise.

//App.js
function App() {
  const [count, setCount] = useState(0);
  const handleAdd = () => {
    setCount(count + 1);
  };
  return (
    <div className="App">
      <h1>Demo useState</h1>
      <Result count={count} />
      <Button handleAdd={handleAdd} />
    </div>
  );
}

//Result.js
import { useState } from "react";

const Result = ({ count }) => {
  return (
    <>
      <div>{count}</div>
    </>
  );
};

export default Result;

//Button.js
import { useState } from "react";

const Button = ({ handleAdd }) => {
  return <button onClick={handleAdd}>+</button>;
};

export default Button;

Components are all about reusability. Let's make the Button component reusable by changing it so that it can increment the global count with any value, not just 1.

Exercise 3: rewrite the Button component that can be use for both:

• Increment and decrement button
• Perform a different action based on a value that is specific to each of them

Demo:

This form has the default HTML form behavior of browsing to a new page when the user submits the form.

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form.

The standard way to achieve this is with a technique called controlled components.

We can combine the two state by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input.

An input form element whose value is controlled by React in this way is called a "controlled component".

Follow the instruction to create a form with React.

• Create a new component name: LoginForm.js, return a form with email and password input

  //LoginForm
  
  <form>
    <label for="email">Email:</label>
    <input type="text" id="email" />
    <br />
    <label for="password">Password:</label>
    <input type="password" id="password" />
    <br />
    <button type="submit" value="Submit">
      Submit
    </button>
  </form>
  

• Add a function to handle the submit event, then stop the default behavior of the HTML form

  const handleSubmit = (event) => {
      event.preventDefault();
  }
  ...
  <form onSubmit={handleSubmit}>
  

• Handle the onChange event with a function, update the state whenever user input something in

  const [email, setEmail] = useState("");
  ...
  const handleEmail = (event) => {
      setEmail(event.target.value);
    };
  ...
  <input type="text" id="email" onChange={handleEmail} value={email} />
  

• Finally, log to the console an object like the following:

  {email: "yourname@gmail.com", password:123}
  

Exercise 4:

Create a form to take those information:

• Name, email, phone number, password, confirm password (if the confirm password is not same as password, alert a warning message)
• Think of the better way to manage the data. What if you have a form that require 10 input like a shipping detail page in an e-commerce site? You will use useState 10 times and create 10 handle function?

Create a form with the following type of input:

• Name
• Age
• Date of birth (use the library react-datepicker)
• Gender (check box select)
• Email (validated type)
• Phone
• About (textarea)

Bonus

• When the user click submit, it will render to the screen below the information that they just added.
• The information will not disappear when reload the page (hint: using localStorage)