React.js + Vite.js Context API Bootstrap Table CRUD Project Using useContext Hook in Browser

Get Started

In order to get started you need to create a new react.js project using vite.js as shown below

npm create vite@ latest

npm i react-bootstrap

context/UserContext.js

import { createContext } from "react";

export const UserContext = createContext(null)

import { createContext } from "react";

export const UserContext = createContext(null)

As you can see we are creating a new user context using the createContext() method and now we need to create the provider for the context

providers/UserProvider.js

import { useState } from "react";
import { UserContext } from "../context/UserContext";

export const UserProvider = ({ children }) => {
  const [users, setUsers] = useState([]);

  let addUser = (user) => {
    console.log(user);
    setUsers([...users, user]);
  };

  let deleteUser = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };

  let updateUser = (id,name,age) => {
    const affectedUser = users.map((user) => {
      if (user.id === id) {
        return { ...user, name: name, age: age };
      }
      return user;
    });
    console.log(affectedUser)
    setUsers(affectedUser);
    console.log(users)
  };

  return (
    <UserContext.Provider value={{ users, addUser, updateUser, deleteUser }}>
      {children}
    </UserContext.Provider>
  );
};

import { useState } from "react";

import { UserContext } from "../context/UserContext";

export const UserProvider = ({ children }) => {

const [users, setUsers] = useState([]);

let addUser = (user) => {

console.log(user);

setUsers([...users, user]);

};

let deleteUser = (id) => {

setUsers(users.filter((user) => user.id !== id));

};

let updateUser = (id,name,age) => {

const affectedUser = users.map((user) => {

if (user.id === id) {

return { ...user, name: name, age: age };

}

return user;

});

console.log(affectedUser)

setUsers(affectedUser);

console.log(users)

};

return (

<UserContext.Provider value={{ users, addUser, updateUser, deleteUser }}>

{children}

</UserContext.Provider>

);

};

As you can see we have imported the context at the top and then we have defined all the methods for the crud operations and also we have defined the state or data for the crud application. And then we are passing this data and the methods to the provider using the value attribute

Now we need to include it inside the App.jsx file as shown below

App.jsx

import Users from "./Users";
import { UserProvider } from "./providers/UserProvider";

function App() {

  return (
    <UserProvider>
    <Users/>
    </UserProvider>
  );
}

export default App;

import Users from "./Users";

import { UserProvider } from "./providers/UserProvider";

function App() {

return (

</UserProvider>

);

}

export default App;

As you can see we are surrounding the provider as the root tag and inside it we have the Users component that we need to create as shown below

Users.jsx

import React, { useContext, useRef, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { UserContext } from "./context/UserContext";
import { Container, Table, Button, Form } from "react-bootstrap";

function Users() {
  const { users, addUser,updateUser, deleteUser } = useContext(UserContext);

  const nameRef = useRef(null);
  const ageRef = useRef(null);

  const [currentId,setCurrentId] = useState(null)
  const [currentName,setCurrentName] = useState(null)
  const [currentAge,setCurrentAge] = useState(null)
  const [name, setName] = useState(null);
  const [age, setAge] = useState(null);
  const [update, setUpdate] = useState(false);

  let handleUsers = (e) => {
    e.preventDefault()
    let id = Date.now();
    let user = {
      id,
      name,
      age,
    };
    addUser(user);
    nameRef.current.value = '';
    ageRef.current.value = '';
  };

  let editUser = (user) => {
    setUpdate(true)
    setCurrentId(user.id)
    setCurrentName(user.name)
    setCurrentAge(user.age)
    nameRef.current.value = user.name
    ageRef.current.value = user.age
    console.log(user)
  }

  let handleUpdate = (e) => {
    e.preventDefault()
    console.log(currentName,currentAge)

    updateUser(currentId,currentName,currentAge)
    setCurrentId(null)
    setCurrentAge(null)
    setName(null)
    setAge(null)
    setUpdate(false)

    nameRef.current.value = '';
    ageRef.current.value = '';
  };

  return (
    <div>
      <Container>
        <h1 className="text-center">React.js Context API CRUD Project</h1>
        {update ? (
          <Form onSubmit={handleUpdate}>
            <Form.Group>
              <Form.Label>Name</Form.Label>
              <Form.Control
                required    
                ref={nameRef}
                onChange={(e) => setCurrentName(e.target.value)}
                type="text"
                placeholder="Enter name"
              />
              <Form.Label>Age</Form.Label>
              <Form.Control
                required
                ref={ageRef}
                onChange={(e) => setCurrentAge(e.target.value)}
                type="number"
                placeholder="Enter age"
              />
            </Form.Group>
            <br />
            <Button type="submit">Update User</Button>
          </Form>
        ) : (
          <Form onSubmit={handleUsers}>
            <Form.Group>
              <Form.Label>Name</Form.Label>
              <Form.Control
                required
                ref={nameRef}
                onChange={(e) => setName(e.target.value)}
                type="text"
                placeholder="Enter name"
              />
              <Form.Label>Age</Form.Label>
              <Form.Control
                required
                ref={ageRef}
                onChange={(e) => setAge(e.target.value)}
                type="number"
                placeholder="Enter age"
              />
            </Form.Group>
            <br />
            <Button type="submit">Add User</Button>
          </Form>
        )}
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Age</th>
              <th>Edit User</th>
              <th>Delete User</th>
            </tr>
          </thead>
          <tbody>
            {users.map((u) => (
              <tr>
                <td>{u.id}</td>
                <td>{u.name}</td>
                <td>{u.age}</td>
                <td>
                  <Button onClick={() => editUser(u)}>Edit User</Button>
                </td>
                <td>
                <Button onClick={() => deleteUser(u.id)}>Delete User</Button>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Container>
    </div>
  );
}

export default Users;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

import React, { useContext, useRef, useState } from "react";

import "bootstrap/dist/css/bootstrap.min.css";

import { UserContext } from "./context/UserContext";

import { Container, Table, Button, Form } from "react-bootstrap";

function Users() {

const { users, addUser,updateUser, deleteUser } = useContext(UserContext);

const nameRef = useRef(null);

const ageRef = useRef(null);

const [currentId,setCurrentId] = useState(null)

const [currentName,setCurrentName] = useState(null)

const [currentAge,setCurrentAge] = useState(null)

const [name, setName] = useState(null);

const [age, setAge] = useState(null);

const [update, setUpdate] = useState(false);

let handleUsers = (e) => {

e.preventDefault()

let id = Date.now();

let user = {

id,

name,

age,

};

addUser(user);

nameRef.current.value = '';

ageRef.current.value = '';

};

let editUser = (user) => {

setUpdate(true)

setCurrentId(user.id)

setCurrentName(user.name)

setCurrentAge(user.age)

nameRef.current.value = user.name

ageRef.current.value = user.age

console.log(user)

}

let handleUpdate = (e) => {

e.preventDefault()

console.log(currentName,currentAge)

updateUser(currentId,currentName,currentAge)

setCurrentId(null)

setCurrentAge(null)

setName(null)

setAge(null)

setUpdate(false)

nameRef.current.value = '';

ageRef.current.value = '';

};

return (

<div>

<h1 className="text-center">React.js Context API CRUD Project</h1>

{update ? (

<Form.Group>

<Form.Label>Name</Form.Label>

<Form.Control

required

ref={nameRef}

onChange={(e) => setCurrentName(e.target.value)}

type="text"

placeholder="Enter name"

<Form.Label>Age</Form.Label>

<Form.Control

required

ref={ageRef}

onChange={(e) => setCurrentAge(e.target.value)}

type="number"

placeholder="Enter age"

</Form.Group>

<br />

<Button type="submit">Update User</Button>

</Form>

) : (

<Form.Group>

<Form.Label>Name</Form.Label>

<Form.Control

required

ref={nameRef}

onChange={(e) => setName(e.target.value)}

type="text"

placeholder="Enter name"

<Form.Label>Age</Form.Label>

<Form.Control

required

ref={ageRef}

onChange={(e) => setAge(e.target.value)}

type="number"

placeholder="Enter age"

</Form.Group>

<br />

</Form>

)}

<thead>

<tr>

<th>Delete User</th>

</tr>

</thead>

<tbody>

{users.map((u) => (

<tr>

<td>

<Button onClick={() => editUser(u)}>Edit User</Button>

</td>

<td>

<Button onClick={() => deleteUser(u.id)}>Delete User</Button>

</td>

</tr>

))}

</tbody>

</Table>

</Container>

</div>

);

}

export default Users;