In this tutorial we will build a create, read, update and delete web application with React using React Hooks. Hooks let us use state and other features in functional components instead of writing class components.
This tutorial is divided up in the following sections:
Setting up the project
Adding users table
Adding a user
Deleting a user
Updating a user
Using the Effect Hook
1. Setting up the project
We will start by creating a react app with npm:
Then browse to this folder and delete everything from the /src folder except App.js, index.js and index.css
For index.css we will use a simple CSS boilerplate called Skeleton which you can find here:
Add the styles in the /public folder into index.html:
Then convert App.js to a functional component and add the following set-up. Notice how easy the skeleton CSS boiler plate works:
2. Adding users table
We will retrieve our user data from a separate file. Let’s create data.js inside /src and add an array called users with a couple user object inside and then export it:
Then create a folder called /tables and add a file UserTable.jsx. Here we will add a basic table which loops over the users. Notice we are using a ternary operator which is the same as an if/else statement which returns immediately. Also we are destructuring off the object properties so we do not have to rewrite the property again. If there are no users found, we will show an empty cell with some text.
The table loops over the users received by App.js through the user props. Let’s add them into App.js and also the functionality to retrieve users from data.js which we will do with useState. Every useState has a getter and a setter.
Make sure to import the UserTable in App.js and add the users as props into UserTable.
3. Adding a user
Next up we will add the functionality to add a user, first by adding the function into App.js which receives the new user from the Add User component which we will create.
The addUser function puts an object containing a new user into our users array of user objects. We do this by using our setUsers from useState function. By using the spread operator we keep the current user array the same. The ID we will just set based on the current amount of users plus one.
Then we will pass this function to our Add User component:
Which we will create now! Create a folder /forms with a file called AddUserForm.jsx.
Again we are using useState to manage the state of our new user. The initial state of the user values are empty. Now we will add the onChange and onSubmit functions:
For handleChange, we destructure off the properties of the event.target object. Then we dynamically set our object keys based on the used input field:
Great! Now we can add a user. Notice in our handleSubmit we are preventing the default page refresh and also checking if our user.name and user.username actually have both been filled in.
4. Deleting a user
Now we will add the functionality to delete a user, which is quite simple. We will just filter over our users array and filter out the user which has the ID of the user we want to delete. Again we will use our setUsers function to update the new users state.
5. Updating a user
Updating a user is a bit more difficult than adding or deleting a user. First we will set up out form in ./forms/EditUserForm.jsx and import it into App.js. We will just copy our AddUserForm.jsx and change the currentUser to the user we are receiving from App.js:
onSubmit we send the updated users back to App.js
In App.js we will use the useState function again to check if the user is currently editing and to decide which user is currently being edited:
We will show the AddUser or EditUser form based on editing state:
Then we will add our editUser and updateUser functions in App.js:
Great! Now we can edit our users. Let’s fix the last issue in the next section.
6. Using the Effect Hook
It is currently not possible to change user while editing, we can fix this by using the effect hook. This is similar to componentDidMount() in class components. First make sure to import useEffect in EditUserForm.jsx
This will make when the component re renders, the props are also updated.
Super! We have finished building our React CRUD app with Hooks.