DEV Community

Creating a CRUD app in React with Hooks

sanderdebr on March 08, 2020

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 fea...

Read full post

Austeja Kazlauskyte • Jul 13 '20 • Edited

Hey again!
I have a question.
Let's say my User object not only has fields like Id, Name, and Username, but it also has an Address. Inside the Address field, it has City and ZIP.
In other words, the User has another object inside it.
If I would like to add this User object using a form, how could I reach those second-level properties, like City, in order to update the name?

Thank you for any tips!
Austeja

sanderdebr • Jul 15 '20 • Edited

Hi no problem!

I would create an exception for your ZIP and City fields. When the name of the fields is one of those, the function will update the user object.

const handleChange = (e) => {
    const { name, value } = e.target;

    if (name === "zip" || name === "city") {
      setUser({ ...user, address: { [name]: value } });
    } else {
      setUser({ ...user, [name]: value });
    }
  };

It is also possible to build a function that searches all the object keys in the user object, and updated the one you want if it finds it but this is a bit more work.

The three dots indicate the object spread, this automatically will create a copy of the object and update the values you want. Another way is to use const draftUser = Object.assign({}, user); to create a copy of the user object. Then you can object this draftUser object and update the state with it :-)

Austeja Kazlauskyte • Jul 17 '20

thank you, amazing!

Austeja Kazlauskyte • Jun 24 '20

I ran into a problem with the EditUserForm method.
The Edit button is not working;/
I have a feeling it has to do this method:
const handleChange = e => {
const {name: name, value} = e.target;
setUser({...user, [name]: value});
}

I've got an underline saying: Argument type {} is not assignable to parameter type ((prevState: EditUserForm.props.currentUser) => EditUserForm.props.currentUser) | EditUserForm.props.currentUser

Any ideas what could be wrong?

sanderdebr • Jun 24 '20

Hi, for me it still works using your piece of code. Please checkout my repo if you can find any differences:
github.com/sanderdebr/react-crud-h...

If not you could show me a bit more of your code

Austeja Kazlauskyte • Jun 26 '20

A million thanks for your reply.

I solved the issue by myself. Apparently, I wrote the functions but did not insert the onClick method on the button, to trigger everything.
A beginner mistake.

Thank you for a great tutorial, it made it very easy for me to understand how to do CRUD with React.

And to be honest - through you, I found Skeleton and immediately fell in love with this framework. I am definitely going to use it in the future when I need smth fast to bootstrap my small coding projects.

Austeja Kazlauskyte • Jun 27 '20

Hey, another question if you may - how would you fetch data from an API?
Would you just replace the data.js file with a function that receives data using Hooks, or would you recommend something else? Thank you!

sanderdebr • Jun 28 '20

Hi, thanks for the suggestion I've just added a Bonus section where I explain how to fetch user data from an API. I think it is a very helpful addition to this tutorial.

The way I did it might be a bit hard to understand, there are easier ways to fetch data in React but in this way you'll also learn about custom hooks :)

Also, I've added a little update for adding multiple users with the same data.

Austeja Kazlauskyte • Jul 2 '20

That is amazing, thanks! ⭐️💜👍🏻

Tung Nguyen • Aug 8 '20 • Edited

In ./tables/UserTable.jsx You add onClick={() => props.editUser(id, user)} into button Edit

danielpdev • Mar 8 '20 • Edited

Great post!
It has a little issue.
It does not work well when you hit twice add user for the same data.

sanderdebr • Jun 28 '20 • Edited

Thanks, I've added a fix for this!

Vinh2203 • Mar 12 '20

you can modify the handleSubmit function in AddUserForm.jsx by adding this line
setUser(initUser);

Claude Will • Apr 26 '20 • Edited

One issue I ran into with this is that the deleteUser method deletes all users from the table when I just click delete on one of them.

Any idea how I can correct this? I originally found this tutorial on another website then did a search when I ran into the issue and came here. I am some what "new" to React and can't figure out why it's deleting all with clicking the delete button on a single item.

Thank you

Claude Will • Apr 26 '20

Found the issue. Heh I feel like an idiot, I always seem to have something really small that I'm missing. It's working fine now. Thanks for the article.

termyn9 • Oct 30 '20 • Edited

Hey! U did a perfect course about CRUD- app, but i do not undrestand something... Could you show how to realize POST, ADD, DELETE methods of API? I really need your help, I can't cope on my own.

vnivy • May 19 '21

Hey!
I have a question about how to add 5 to 6fields if tried adding those but its not working for me it would be nice if u help me :)
thanks in advance.

Mohammed Arkam • Jul 27 '23

why I'm not unable to input any values in the input name and username fields to add a data.