QUICK RECAP
In the previous section of this Chapter 3, we spoke about Props, what they are and what they do. In the process we looked at Higher Order Components i.e. React Components that return Components. Then we closed the section by building a project called “HelloWorld”, which translates the phrase “Hello World” to different programming languages along with key details of that language. In this sub-section we would be taking a brief detour on an important concept called React Hooks.
HOOKS
What exactly are Hooks? In the React documentation, “Hooks let you use different react features in your component”. This is a very simple yet compact definition. The two takeaways are:
- features
- component
In my own words, I can define Hooks as functions that provide added functionality to your components. Hooks are a new concept in React, previously in the dinosaur years, to achieve the functionality that Hooks provide, one had to use what was called Lifecycle methods and Class based components, but we are in the age of fast cars and phones with no keypads. As a concept, Hooks are best understood while in use-mode than explained theoretically, so I would elaborate on their functionality in the code explanation. However, there are different Hooks for different purposes. The ones listed below are the in-built hooks that React provides:
- useState()
- useEffect()
- useReducer()
- useRef()
- useContext()
- useMemo()
- useCallback()
The list above is not exhaustive, React has more Hooks but the one’s listed above are the relevant ones that would be used in the first season of reactbyprojects. In the second season, we would cover the new types of Hooks. In any case, the Hooks that have been listed here are quite exhaustive and powerful enough to build complex applications as you would later see in subsequent chapters.
TIP
To read more on the full list of available React Hooks, you can visit the React documentation here.
// 1. Simple Details form
// 2. Name, Birth Year, Country of Origin
// 3. Make name Capital Case
import React, { useState } from "react";
const HooksIntro = () => {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [birthYear, setBirthYear] = useState("1970-01-01");
const [country, setCountry] = useState("");
const [message, setMessage] = useState("");
const handleForm = (event) => {
event.preventDefault();
console.log(firstName, lastName, birthYear, country);
setFirstName("");
setLastName("");
setBirthYear("1970-01-01");
setCountry("");
setMessage("Thanks for adding your details");
}
return (
<>
<form onSubmit={handleForm}>
<label htmlFor="firstName">First Name: </label>
<input
type="text"
name="firstName"
value={firstName}
onChange={(event) => setFirstName(event.target.value)}
/>
<br />
<label htmlFor="lastName">Last Name: </label>
<input
type="text"
name="lastName"
value={lastName}
onChange={(event) => setLastName(event.target.value)}
/>
<br />
<label htmlFor="birthYear">Birth Year: </label>
<input
type="date"
name="birthYear"
value={birthYear}
onChange={(event) => setBirthYear(event.target.value)}
/>
<br />
<label htmlFor="country">Country: </label>
<input
type="text"
name="country"
value={country}
onChange={(event) => setCountry(event.target.value)}
/>
<button type="submit">Details</button>
</form>
<h2>{message}</h2>
</>
);
};
export { HooksIntro };useState()
The useState() hook is an important Hook and one you would use in most React projects. State in React refers to a variable or instance that is subject to change. Intuitively, since React is about creating re-usable UI elements, this concept helps us to track the state(change) of any UI element. e.g. when a radio button is clicked, when data has been fetched, when a form input’s value has been changed etc. useState() hence enables us to assign both a default value and a callback function to set this state.
In the form example mentioned in the previous paragraph, it’s default value would be empty and it would have a function that responds to a change in its default value. In the code above this happens here:
const [firstName, setFirstName] = useState("");The code about contains most of the fabric in using the useState hook. The first fabric is the array. This hook has to contain two elements in the array; this is because the hook has been set to accept two arguments and none of them can be empty. The first argument is the name of the variable/UI element, and the second argument is the name of the callback function.
TIP
It is a React convention when naming the callback function to begin with "set" e.g. setFirstName, setAge, setCountry.
When the two arguments have been set, the next step is to add a default value to the hook. In this case we added an empty string – “” but this can be anything from an empty array to an object to a number. Any default value that you want can be added.
Do not fret if this is seeming like a lot is happening, from here till Chapter 12, we would be getting our feet wet with both in-built hooks and guess it – our own custom hooks. I believe by the time we start building our own custom hooks, the concept of hooks would begin to drive home.
CODE EXPLANATION
What we are trying to create is a simple details form that captures the following information from the user/client:
- first name
- last name
- birth year
- country of origin
The last element, message, is for user experience and not information provided by the user. For each of this information, I have created a state hook, in order to capture their details and more importantly to render these details back to the client. These are what the first lines in the HooksIntro() component does:
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [birthYear, setBirthYear] = useState("1970-01-01");
const [country, setCountry] = useState("");
const [message, setMessage] = useState("");You can see that each of the different states all have their variable, callback function and default values. Notice how the default value for birthyear is different from the empty strings of the other variables; useState hooks can contain any default value. If you want to pass more than one value, you can use an array or an object. Infact, in later chapters you would learn how to collapse all these state elements into one then reference each of them in an object, but one foot in front of another.
The handleForm() component contains code that tells React what to do when the client presses the button. We would dwell on this later, first let’s look at the return statement. The HooksIntro() component returns a React empty fragment that contains a form. The form has four input elements and labels. The form also has an onSubmit attribute and this is where we pass the handleForm component, telling React what to do when the form is submitted. You could have alternatively used onClick attribute, passing it to the button element then passing the handleform component there but be aware that you must use one of the two ways and not the two ways at the same time. e.g.
<form>
<label>Form with onClick attribute</label>
<input
type="text"
/>
<button type="submit" onClick={handleForm}></button>
</form>TIP
To learn more about HTML forms and their attributes, w3schools provides a succinct documentation here.
There are two important things in the input elements I want to briefly discuss. The first is the value. You can see in each of the form inputs, the value is set to the state variable e.g.
<input
value={firstName}
/>The code above shows the firstName state variable has been set to the form value. The next thing to notice is the onChange attribute. This attribute should be your friend especially when using useState hooks. This way of setting the value to a state variable with the onChange attribute is called Controlled Inputs – we would go in-depth in this in another chapter. What the onChange attribute does is to call the callback function every time the UI element changes. Hence:
<input
type="date"
name="birthYear"
value={birthYear}
onChange={(event) => setBirthYear(event.target.value)}
/>BRIEF DETOUR – onChange attribute
You know how intuitive it is for us to see each letter whenever we type a set of characters using any input device (keyboard for instance or keypad), that intuitive action of seeing each character you type is what the onChange() attribute is trying to do. In this instance, you can define what you want to happen each time. In our case, we want to call the event object. The event object is a vast object, the image below shows some of its attributes you can also view this object by using console.log(event) instead of the setBirthYear e.g.
onChange={(event) => console.log(event}This is what you get after changing the value of form birth year form input:
You would notice that the event object has a key called target which in turn also has a key called value and look at what is – “1970-01-01” – which is exactly our useState() default value for birth year:
const [birthYear, setBirthYear] = useState("1970-01-01");This means that by tapping into this event objects’ value key, which is two stages deep, we can call the callback function every time to show the changes whenever the birth year value is changed.
handleForm()
In the handleForm() we pass the event object again, this time solely because we want to prevent it’s default behavior:
event.preventDefault()The other lines in this function contain what should happen after the submit button has been clicked. In real world applications where, one is trying to collect customers information, this is where you would either reference the database logic or write them here, saving the customers details for example. In our case, all we want to do is to see how the useState() hook works in respect to forms. After the button is pressed, we reset all the values back to their initial state except the message state which instead displays a message:
event.preventDefault();
console.log(firstName, lastName, birthYear, country);
setFirstName("");
setLastName("");
setBirthYear("1970-01-01");
setCountry("");
setMessage("Thanks for adding your details");SUMMARY
In this sub-section, we looked at Hooks, what they are, how they are used and some distinct types. It provided a gentle introduction to them as they are fundamental in React. We also went deep into the event object and the onChange attribute and looked at the several ways of submitting a form. We briefly mentioned the Controlled Inputs and what they are. In the next section, we would be building our own Application Programming Interface (API).
