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
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
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
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
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; |