Author: ziontutorial Page 1 of 11

npx create-react-app my-app
cd my-app
npm start

npm i bootstrap@5.3.0-alpha3

import React from "react";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import "./index.css";

const Nave = () => {
  return (
    <>
      <section>
        <Navbar bg="primary" expand="lg">
          <Container className="p-3">
            <Navbar.Brand className="text-white" href="#home">
              ziontutorial
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse className="justify-content-end">
              <Nav className="me-auto justify-content-end">
                <Nav.Link className="text-white " href="/">
                  Home
                </Nav.Link>
                <Nav.Link className="text-white" href="/view">
                  Employee
                </Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      </section>
    </>
  );
};

export default Nave;

"json-server": "json-server --watch db.json --port 3003",
    "start:dev": "concurrently \"npm start\" \"npm run json-server\"",

The react-router-dom package contains bindings for using React Router in web applications. 

npm i react-router-dom

import Add from "./Add";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Nave from "./Nav";
import CheckboxTable from "./CheckboxTable";
import Deletemultiplerow from "./Deletemultiplerow";

const App = () => {
  return (
    <BrowserRouter>z
      <div className="App">
        <Nave />
        <>
          <Routes>
            <Route path="/" element={<Add />} />
            <Route path="/view" element={<CheckboxTable />} />
          </Routes>
        </>
      </div>
    </BrowserRouter>
  );
};

export default App;

import React, { useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [id, idchange] = useState("");
  const [username, usernamechange] = useState("");
  const [email, emailchange] = useState("");
  const [address, addresschange] = useState("");

  const handlesubmit = (e) => {
    e.preventDefault();
    // console.log({ id, username, email, address });
    const empdata = { id, username, email, address };
    axios
      .post("http://localhost:3003/employee", empdata)
      .then((res) => {
        console.log("res", res);

        alert("saved successfully");
        // window.location.reload();
      })
      .catch((err) => {
        alert("some error is comiing ");
      });
  };

  return (
    <>
      <section className="form-section mt-3">
        <h1 className="heading">React Js CRUD Operation Data 😎</h1>

        <form autoComplete="false" onSubmit={handlesubmit}>
          <div className="input-block">
            <label className="label">
              ID <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="text"
              name="id"
              value={id}
              onChange={(e) => idchange(e.target.value)}
              disabled="disabled"
              placeholder="id"
              tabIndex={-1}
              required
            />
          </div>
          <div className="input-block">
            <label className="label">
              Username <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="text"
              name="username"
              value={username}
              onChange={(e) => usernamechange(e.target.value)}
              placeholder="username"
              tabIndex={-1}
              required
            />
          </div>
          <div className="input-block">
            <label className="label">
              Email <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="email"
              name="email"
              value={email}
              onChange={(e) => emailchange(e.target.value)}
              placeholder="ziontutorialofficial@gmail.com"
              tabIndex={-1}
              required
            />
          </div>
          <div className="input-block">
            <label className="label">
              Address <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="text"
              value={address}
              onChange={(e) => addresschange(e.target.value)}
              name="address"
              tabIndex={-1}
              required
            />
          </div>

          <button tabIndex={-1} className="submit-button">
            Submit
          </button>
        </form>
      </section>
    </>
  );
}

export default App;

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Table, Button, Modal, Form } from "react-bootstrap";

function CheckboxTable() {
  const [items, setItems] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const [editedItem, setEditedItem] = useState(null);
  const [showDeleteModal, setShowDeleteModal] = useState(false);

  useEffect(() => {
    // Fetch data from API endpoint
    axios
      .get("http://localhost:3003/employee")
      .then((response) => setItems(response.data))
      .catch((error) => console.error(error));
  }, []);

  const handleCheckboxChange = (e, item) => {
    if (e.target.checked) {
      setSelectedItems([...selectedItems, item]);
    } else {
      setSelectedItems(
        selectedItems.filter((selectedItem) => selectedItem.id !== item.id)
      );
    }
  };

  const handleEdit = () => {
    // Open modal to edit selected item
    console.log("Opening edit modal...");
    setShowModal(true);
    setEditedItem(selectedItems[0]);
  };

  const handleSave = () => {
    // Update item and close modal
    axios
      .put(`http://localhost:3003/employee/${editedItem.id}`, editedItem)
      .then((response) => {
        setItems(
          items.map((item) =>
            item.id === editedItem.id ? response.data : item
          )
        );
        setShowModal(false);
        setEditedItem(null);
      })
      .catch((error) => console.error(error));
  };

  const handleClose = () => {
    // Close modal and reset edited item
    setShowModal(false);
    setEditedItem(null);
  };

  const handleDelete = () => {
    setShowDeleteModal(true);
  };

  const handleDeleteConfirm = () => {
    // Delete selected items and close modal
    const itemIds = selectedItems.map((item) => item.id);
    axios
      .delete(`http://localhost:3003/employee/${itemIds.join(",")}`)
      .then(() => {
        setItems(items.filter((item) => !itemIds.includes(item.id)));
        setSelectedItems([]);
        setShowDeleteModal(false);
      })
      .catch((error) => console.error(error));
  };

  const handleChange = (e) => {
    // Update edited item with form data
    setEditedItem({ ...editedItem, [e.target.name]: e.target.value });
  };

 

  return (
    <section className="container">
      <h1 className="heading">React Js CRUD Operation Data 😎</h1>
      <div className="button_wrapper">
        <Button
          className="btn1"
          onClick={handleEdit}
          disabled={selectedItems.length !== 1}
        >
          Edit
        </Button>
        <Button
          className="btn-2 ml-5"
          onClick={handleDelete}
          disabled={selectedItems.length === 0}
        >
          Delete
        </Button>
      </div>
      <Table striped bordered hover className="section_wrapper">
        <thead>
          <tr>
            <th></th>
            <th>id</th>
            <th>username</th>
            <th>email</th>
            <th>address</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => (
            <tr key={item.id}>
              <td>
                <Form.Check
                  type="checkbox"
                  onChange={(e) => handleCheckboxChange(e, item)}
                  checked={selectedItems.some(
                    (selectedItem) => selectedItem.id === item.id
                  )}
                />
              </td>
              <td>{item.id}</td>
              <td>{item.username}</td>
              <td>{item.email}</td>
              <td>{item.address}</td>
            </tr>
          ))}
        </tbody>
      </Table>

      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Item</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group controlId="formBasicUsername">
              <Form.Label>Username</Form.Label>
              <Form.Control
                type="text"
                placeholder="Enter username"
                name="username"
                value={editedItem?.username}
                onChange={handleChange}
              />
            </Form.Group>

            <Form.Group controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control
                type="email"
                placeholder="Enter email"
                name="email"
                value={editedItem?.email}
                onChange={handleChange}
              />
            </Form.Group>

            <Form.Group controlId="formBasicAddress">
              <Form.Label>Address</Form.Label>
              <Form.Control
                type="text"
                placeholder="Enter address"
                name="address"
                value={editedItem?.address}
                onChange={handleChange}
              />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleSave}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>

      <Modal show={showDeleteModal} onHide={() => setShowDeleteModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Delete Items</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Are you sure you want to delete the selected items?</p>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowDeleteModal(false)}>
            Cancel
          </Button>
          <Button variant="danger" onClick={handleDeleteConfirm}>
            Delete
          </Button>
        </Modal.Footer>
      </Modal>
    </section>
  );
}

export default CheckboxTable;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  background-color: #f4f4f4;
}

.heading {
  text-align: center;
  font-size: 2.75rem;
  margin-bottom: 1em;
}

.form-section {
  min-height: 95vh;
  display: grid;
  place-content: center;
}
.section_wrapper {
  place-content: center;
  padding: 10rem;
}

.input-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 2em 0 0.5em;
}

.label {
  font-family: "Roboto";
  letter-spacing: 0.25px;
  font-weight: 500;
  font-size: 1.35rem;
  color: #000;
  margin-bottom: 0.35em;
}

.requiredLabel {
  color: red;
  font-weight: bold;
}

.input {
  padding: 1.35em 1em;
  width: 350px;
  background-color: #fff;
  outline: none;
  border: 1px solid rgb(130, 130, 130);
  border-radius: 0.25em;
}

.submit-button-wrapper {
  display: flex;
}

.float {
  justify-content: flex-end;
}

.submit-button {
  margin-top: 1.75rem;
  background-color: #000;
  color: #fff;
  letter-spacing: 0.5px;
  padding: 0.85em 2.2em;
  border: none;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 4px;
}

.button_wrapper {
  margin-bottom: 1rem;
  display: flex;
}

.btn {
  margin-left: 10px;
  padding: 0.85em 2.2em;
  border: none;
  font-size: 1rem;
  font-weight: 500;
}
.btn-1 {
  margin-left: 10px;
  padding: 0.85em 2.2em;
  border: none;
  font-size: 1.5rem;
  font-weight: 500;
}

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

{
  "employee": [
    
  ]
}