Building a CRUD Application in React

Introduction

React component (App) provides a basic framework for managing users with CRUD operations. It uses React hooks (useState) for state management and passes down necessary props (addUser, updateUser, editRow, deleteUser) to child components (AddUserForm, EditUserForm, UserTable) for handling user interactions and data flow.

Code

import React, { useState, Fragment } from "react";
import AddUserForm from '../forms/AddUserForm';
import EditUserForm from "../forms/EditUserForm";
import UserTable from "../table/UserTable";
function App() {
  // Data state initialization --> usersData: An array containing initial user data.
  const usersData = [
    { id: 1, name: "Tania", email: "[email protected]", contact: 989898757, status: "Active" },
    { id: 2, name: "Craig", email: "[email protected]", contact: 999898757, status: "Inactive" },
    { id: 3, name: "Ben", email: "[email protected]", contact: 979898757, status: "Active" }
  ];
  // State initialization --> initialFormState: An object representing the initial state of the form fields.
  const initialFormState = { id: null, name: "", email: "", contact: "", status: "" };
  // Setting state
  const [users, setUsers] = useState(usersData);
  const [currentUser, setCurrentUser] = useState(initialFormState);
  const [editing, setEditing] = useState(false);
  // CRUD operations
  const addUser = (user) => {
    user.id = users.length + 1;
    setUsers([...users, user]);
  };
  const deleteUser = (id) => {
    setEditing(false);
    setUsers(users.filter((user) => user.id !== id));
  };
  const updateUser = (id, updatedUser) => {
    setEditing(false);
    setUsers(users.map((user) => (user.id === id ? updatedUser : user)));
  };
  const editRow = (user) => {
    setEditing(true);
    setCurrentUser({
      id: user.id,
      name: user.name,
      email: user.email,
      contact: user.contact,
      status: user.status
    });
  };
  return (
    <div className="container">
      <h4>Manage Employee</h4>
      <div className="flex-row">
        <div className="flex-large">
          {editing ? (
            <Fragment>
              <h4>Edit user</h4>
              <EditUserForm
                editing={editing}
                setEditing={setEditing}
                currentUser={currentUser}
                updateUser={updateUser}
              />
            </Fragment>
          ) : (
            <Fragment>
              <h4>Add user</h4>
              <AddUserForm addUser={addUser} />
            </Fragment>
          )}
        </div>
        <br />
        <div className="flex-large">
          <h2>View users</h2>
          <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />
        </div>
      </div>
    </div>
  );
}
export default App;

1. Introduction to CRUD Operations: Briefly explain what CRUD operations are (Create, Read, Update, Delete) and why they are fundamental in web development.
2. Setting Up Your React Environment: Guide readers through setting up a new React project using Create React App or a similar tool.
3. Creating the User Data Structure: Define the structure of the user data object and explain how to set initial data using useState hook.
4. Building the Add User Form Component: Implement a form component (AddUserForm) that allows users to input new user details and add them to the list.
5. Building the Edit User Form Component: Develop a form component (EditUserForm) for editing existing user details, including pre-filling the form with current data.
6. Creating the User Table Component: Construct a table component (UserTable) that displays a list of users with options to edit or delete each user.
7. Implementing CRUD Operations: Show how to implement each CRUD operation (Create, Read, Update, Delete) using useState and setState in React.
8. Connecting Components and Managing State: Explain how to manage state across different components using React's useState and useEffect hooks, and how to pass data and functions between parent and child components.
9. Styling with Bootstrap or CSS: Optionally, demonstrate how to style components using Bootstrap or custom CSS to enhance the application's appearance and user experience.

Conclusion

Recap what has been covered in the article and encourage readers to further customize and expand upon the CRUD application.