How to make card generator with useReducer hook in React JS

In this article, we are going to learn How to make card generator with useReducer hook in React JS
In this article ,we are going to make the react snippet which allows us to make card generator of own type with the help of useReducer hook.First we have to make the App js file.In App.js file we have to set the two states one is name and other is description,next we have to make the handle submit function which allows to make the newItems object,which is surely being dispatched on specific conditions,then we have the close Modal function.In html we have the accordion of react-bootstrap and some input fields

App.js file is displayed below:

1import React, { useState, useReducer } from "react";
2import Modal from "./Modal";
3import data from "./Data";
4
5import Accordion from "react-bootstrap/Accordion";
6import Card from "react-bootstrap/Card";
7import Button from "react-bootstrap/Button";
8
9// reducer function
10import { reducer } from "./reducer";
11const defaultState = {
12  people: [],
13  isModalOpen: false,
14  modalContent: ""
15};
16const App = () => {
17  const [name, setName] = useState("");
18  const [description, setDescription] = useState("");
19  const [state, dispatch] = useReducer(reducer, defaultState);
20  const handleSubmit = (e) => {
21    e.preventDefault();
22
23    if (name || description) {
24      console.log(name);
25      const newItem = {
26        id: new Date().getTime().toString(),
27        name,
28        description
29      };
30      dispatch({ type: "ADD_ITEM", payload: newItem });
31      setName("");
32      setDescription("");
33    } else {
34      dispatch({ type: "NO_VALUE" });
35    }
36  };
37  const closeModal = () => {
38    dispatch({ type: "CLOSE_MODAL" });
39  };
40  const EditData = () => {};
41  return (
42    <>
43      {state.isModalOpen && (
44        <Modal closeModal={closeModal} modalContent={state.modalContent} />
45      )}
46
47      <Accordion defaultActiveKey="0">
48        <Accordion.Item eventKey="0">
49          <Accordion.Header>Form</Accordion.Header>
50          <Accordion.Body>
51            <form onSubmit={handleSubmit} className="form">
52              <div className="flex ">
53                <input
54                  placeholder="name..."
55                  className="me-4"
56                  type="text"
57                  value={name}
58                  onChange={(e) => setName(e.target.value)}
59                />
60                <input
61                  placeholder="description..."
62                  className="me-4"
63                  type="text"
64                  value={description}
65                  onChange={(e) => setDescription(e.target.value)}
66                />
67                <button className="btn btn-primary" type="submit">
68                  add{" "}
69                </button>
70              </div>
71            </form>
72          </Accordion.Body>
73        </Accordion.Item>
74      </Accordion>
75
76      {state.people.map((person) => {
77        return (
78          <>
79            <div key={person.id} className="item">
80              <h4></h4>
81            </div>
82            <div>
83              <div class="container mx-auto mt-4">
84                <div class="row">
85                  <div class="col-md-4">
86                    <div class="card" style={{ width: "18rem" }}>
87                      <img
88                        src="https://i.imgur.com/ZTkt4I5.jpg"
89                        class="card-img-top"
90                        alt="..."
91                      />
92                      <div class="card-body">
93                        <h5 class="card-title">{person.name}</h5>
94                        <h6 class="card-subtitle mb-2 text-muted"></h6>
95                        <p class="card-text">{person.description}</p>
96                        <a href="#" class="btn mr-2">
97                          <i class="fas fa-link"></i>{" "}
98                          <button className="btn btn-primary" type="submit">
99                            Edit
100                          </button>
101                        </a>
102                        <a href="#" class="btn ">
103                          <button
104                            className="btn btn-primary"
105                            onClick={() =>
106                              dispatch({
107                                type: "REMOVE_ITEM",
108                                payload: person.id
109                              })
110                            }
111                          >
112                            remove
113                          </button>
114                        </a>
115                      </div>
116                    </div>
117                  </div>
118                </div>
119              </div>
120            </div>
121            <br />
122            <br />
123            <br />
124          </>
125        );
126      })}
127    </>
128  );
129};
130export default App; 

In next,we have the Data.js file ,which contains the object of array.Data.js file is displayed below

1
2  export const data = [
3  { id: 1, name: "Moix" },
4  { id: 2, name: "khan" },
5  { id: 3, name: "peter durry" },
6  { id: 4, name: "Hassan" }
7];

We have to create the modal.js file ,which have the setTimeout() function .Modal.js file is displayed below

1import React, { useEffect } from "react";
2
3const Modal = ({ modalContent, closeModal }) => {
4  useEffect(() => {
5    setTimeout(() => {
6      closeModal();
7    }, 3000);
8  });
9  return (
10    <div className="modal">
11      <p>{modalContent}</p>
12    </div>
13  );
14};
15
16export default Modal;

The main file which contains the mostly functionality is reducer.js,This file have some states,and its takes two arguments one is state and other is action

1export const reducer = (state, action) => {
2  if (action.type === "ADD_ITEM") {
3    const newPeople = [...state.people, action.payload];
4    return {
5      ...state,
6      people: newPeople,
7      isModalOpen: true,
8      modalContent: "item added"
9    };
10  }
11  if (action.type === "NO_VALUE") {
12    return { ...state, isModalOpen: true, modalContent: "please enter value" };
13  }
14  if (action.type === "CLOSE_MODAL") {
15    return { ...state, isModalOpen: false };
16  }
17  if (action.type === "REMOVE_ITEM") {
18    const newPeople = state.people.filter(
19      (person) => person.id !== action.payload
20    );
21    return { ...state, people: newPeople };
22  }
23  throw new Error("no matching action type");
24};

Here is the link of live example which we done so far:
Click here