text: import React, { Fragment, useState } from "react";
  
  const TodoEdit = ({ todo, setTodosChange }) => {
    const [description, setDescription] = useState(todo.description);
  
    //edit description function
    const updateDescription = async e => {
      e.preventDefault();
      try {
        const body = { description };
  
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("jwt_token", localStorage.jwt_token);
  
        await fetch(
          `http://localhost:3005/dashboard/todos/${todo.id}`,
          {
            method: "PUT",
            headers: myHeaders,
            body: JSON.stringify(body)
          }
        );
  
        setTodosChange(true);
        // window.location = "/dashboard";
      } catch (err) {
        console.error(err.message);
      }
    };
  
    return (
      <Fragment>
        <button
          type="button"
          className="btn btn-warning btn-sm"
          data-toggle="modal"
          data-target={`#id${todo.id}`}
        >
          Edit
        </button>
  
        {/* 
          id = id10
        */}
        <div
          className="modal"
          id={`id${todo.id}`}
          onClick={() => setDescription(todo.description)}
        >
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h4 className="modal-title">Edit Todo</h4>
                <button
                  type="button"
                  className="close"
                  data-dismiss="modal"
                  onClick={() => setDescription(todo.description)}
                >
                  &times;
                </button>
              </div>
  
              <div className="modal-body">
                <input
                  type="text"
                  className="form-control"
                  value={description}
                  onChange={e => setDescription(e.target.value)}
                />
              </div>
  
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-warning"
                  data-dismiss="modal"
                  onClick={e => updateDescription(e)}
                >
                  Edit
                </button>
                <button
                  type="button"
                  className="btn btn-dark"
                  data-dismiss="modal"
                  onClick={() => setDescription(todo.description)}
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      </Fragment>
    );
  };
  
  export default TodoEdit;