React-Learning/ToDo.js at main · Anant2101/React-Learning · GitHub

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
import React, { useState } from "react";

const ToDo = () => {
  const [val, setVal] = useState([]);
  const [name, setName] = useState("");
  const [sid, setSid] = useState("");
  const [flag, setFlag] = useState(true);

  const inputHnadler = (event) => {
    setName(event.target.value);
  };

  const Update = () => {
    setVal([...val, name]);
    setName("");
  };

  const deleteUser = (id) => {
    let newArr = val.filter((items, index) => {
      return id != index;
    });
    setVal(newArr);
  };

  const EditUser = (uid) => {
    setSid(uid);
    setFlag(false);
    let newArr = val.filter((items, index) => {
      return uid === index;
    });
    setName(newArr[0]);
  };
  const UpdateArray = () => {
    val[sid] = name;
    setName("");
  };

  return (
    <div className="container">
      <div className="row mt-4">
        <div className="col-sm-6">
          <div className="alert alert-info">
            <h2>ToDo App</h2>
            <div className="form-group">
              <label>Enter Name</label>
              <input
                type="text"
                name="username"
                className="form-control"
                onChange={inputHnadler}
                value={name}
              />
            </div>
            <div className="form-group">
              {flag == true ? (
                <button onClick={Update} className="btn btn-dark">
                  Add User
                </button>
              ) : (
                <button onClick={UpdateArray} className="btn btn-dark ml-3">
                  Edit User
                </button>
              )}
            </div>
          </div>
        </div>
        <div className="col-sm-6">
          <div className="alert alert-info">
            <table className="table">
              <thead>
                <tr>
                  <th>User Name</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {val.map((items, index) => {
                  return (
                    <tr key={index}>
                      <td>{items}</td>
                      <td>
                        <button
                          onClick={() => deleteUser(index)}
                          className="btn btn-danger btn-sm"
                        >
                          Delete
                        </button>
                        <button
                          onClick={() => EditUser(index)}
                          className="btn btn-info btn-sm ml-2"
                        >
                          Update
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ToDo;