Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on April 8, 2023

 

 

 

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

 

 

JavaScript
1
2
3
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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
import Users from "./Users";
import { UserProvider } from "./providers/UserProvider";
 
function App() {
 
  return (
    <UserProvider>
    <Users/>
    </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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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>
      <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;

 

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme