React Js Mini Project - Todo List | Understand Usesate, Useref, Context Api.

---

App.jsx

import { MdDeleteOutline } from "react-icons/md";
import { BiEdit } from "react-icons/bi";
import { useRef, useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./style/style.scss";

const ModalCustom = ({
  open,
  setOpen,
  currentIndex,
  setCurrentIndex,
  listItems,
  setListItems,
  editRef
}) => {
  const handleUpdate = () => {
    const v = editRef.current.value;
    const values =[...listItems]

    values.map((item, index) => {
      if (index == currentIndex){
        listItems[index]= v;
      }
    });

    setListItems(listItems)
  };


  return (
    <div className={`${open ? "showModal" : "hideModal"} modalCustom`}>
      <span style={{ position: "absolute", right: -10, top: -10 }}></span>
      <div className="">
        <input type="text" ref={editRef} />
        <button onClick={() => handleUpdate()}>Update</button>
      </div>
    </div>
  );
};

function App() {
  const [open, setOpen] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [listItems, setListItems] = useState([]);

  const inputRef = useRef();
  const editRef = useRef();

  const handleAdd = () => {
    const val = inputRef.current.value;
    // const arr =[...listItems,val]
    setListItems((prev) => [...listItems, val]);
    console.log("value>>>", val);
  };

  const handleDelete = (index) => {
    console.log(index);
    const items_filter = listItems.filter((item, xindex) => {
      return index != xindex;
    });
    console.log(items_filter);
    setListItems(items_filter);
  };

  const handleEdit = (item, index) => {
    setOpen((prev) => !open);
    setCurrentIndex(index);
    editRef.current.value= listItems[index];
  };
  return (
    <>
      <div className="main">
        <div className="Wrapper">
          <span>Interview Question</span>

          <div className="middle-wrapper">
            <input type="text" ref={inputRef} />
            <button onClick={() => handleAdd()}>Add</button>
          </div>

          <div className="bottom-wrapper">
            <ul>
              {listItems.map((item, index) => {
                return (
                  <div className="items-wrap">
                    <li>{item}</li>
                    <span>
                      <ModalCustom
                        open={open}
                        setOpen={setOpen}
                        currentIndex={currentIndex}
                        setCurrentIndex={setCurrentIndex}
                        listItems={listItems}
                        setListItems={setListItems}
                        editRef = {editRef}
                      />
                      <BiEdit onClick={() => handleEdit(item, index)} />
                      <MdDeleteOutline onClick={() => handleDelete(index)} />
                    </span>
                  </div>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

style.scss

body {
    background: #282626;
    font-size: 30px;
  }

  .main {
    margin: auto;
    background-color: #fff;
    max-width: 90%;
    text-align: center;

    .Wrapper {
      border: 2px solid red;
      height: calc(100vh - 2rem);

      .middle-wrapper {
        border: 1px solid red;
        max-width: 700px;
        margin: auto;
        margin-top: 20px;
        padding: 30px;


      }

      .bottom-wrapper {
        position: relative;
        border: 1px solid red;
        max-width: 700px;
        margin: auto;
        margin-top: 20px;
        padding: 30px;
        text-align: center;

        ul {
          text-decoration: none;
          text-align: left;

          li {
            font-size: 22px;
          }
          .items-wrap {
            border:0px solid red;
            display: flex;
            gap:0px;
            justify-content: space-between;
          }
        }
      }
    }

    .Wrapper2 {
      border: 2px solid yellow;
      //  height:100px;
      min-height: 100px;
      max-height: 400px;
      overflow: auto;
    }


  }

  .showModal{
    display:block;
  }
  .hideModal{
    display:none;
  }
  .modalCustom{

    border:1px solid red;
    max-width: 500px;
    padding:50px;
    margin: auto;
    position:absolute;
    left:10%;
    top:90%;
    background: gray;

  }

  button {
    max-width: 100px;
    min-width: 100px;
    padding: 8px;
    border-radius: 5px;
    background: #3c3ccf;
    color: white;
    font-size: 15px;
  }
  input {
    height: 30px;
    margin-right: 20px;
    min-width: 300px;
    max-width: 500px;
    // border: radius;
    us: 10px;
  }