Как я могу обновить ввод и отправить его

Я хочу, чтобы если я нажму на значок редактирования, то текст появится во вводе и я смогу его редактировать, а когда я отправлю его, он будет редактироваться, а не создаваться снова. Я сделал щелчок на значке редактирования, текст появится во вводе, но когда я отправляю его, он создается как новый, так как я могу это сделать?

вот gif того что у меня есть я хочу в submit будет создан

app.js

function App() {
  const [tasks, setTask]=useState([])
  const [title, setTitle]=useState("")
  const [changeTasks , setChangeTasks ] = useState(false)
  const [edit, setEdit]=useState(false)
 
  useEffect(() => {
    axios.get('/tasks')
    .then(data=>setTask(data.data))
    .catch(err => console.log(err))

  }, [changeTasks]);


const addTask = (e) =>{
  e.preventDefault()
  axios.post('/tasks/create', {title:title, completed: true})
  .then(data => setChangeTasks(pre => !pre))
  .catch(err => console.log(err))
  // to empty input after submit
  setTitle("")

  if(edit === true){
    // do axios.put, but its in other component how could i do that 

  }
}

  return (
    <div className="relative flex min-h-screen bg-gray-200 flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
      <h1 className="flex justify-center p-4 md:p-0 mx-px  md:mt-4 md:mb-3 text-center font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-800 to-pink-300">
        To Do List
      </h1>
      <div className="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
        <div className="p-2">
          <figure className="mb-4">
            <blockquote className="italic font-extralight text-slate-700 mb-5">
              <q> To-Do lists help us break life into small steps. </q>
              <figcaption className="ml-5 text-sm">—Randy Pausch</figcaption>
            </blockquote>
          </figure>

          <form onSubmit={addTask} >
            <input
            onChange={({target})=>{
              setTitle(target.value)
            }}
              type="text"
              className="p-3 mt-2 mb-4 w-full bg-slate-200 rounded border-2 border-slate-200 focus:border-slate-600 focus:outline-none placeholder:italic"
              placeholder="Add Your Task..."
             value={title}
            />
          </form> 

          <ul>
          {tasks.map(ele => <Task {...ele}  setChangeTasks = {setChangeTasks} setTitle={setTitle}  setEdit={ setEdit}/>)}
          </ul>
          
        </div>
      </div>
    </div>
  );
}

export default App;

Task.jsx

    import axios from 'axios'


const Task = ({title, id, completed,setChangeTasks, setTitle,  setEdit}) => {

const updateTask =()=>{
    axios.put(`/tasks/${id}/update`,{title:title,completed : ! completed })
    .then(data => setChangeTasks(pre => !pre))
    .catch(err => console.log(err))

}
const deleteTask =()=>{
    axios.delete(`/tasks/${id}/delete`)
    .then(data => setChangeTasks(pre => !pre))
    .catch(err => console.log(err))
}

const editTask =()=>{
   
     axios.put(`/tasks/${id}/update`,{title:title})
        .then(data => setChangeTasks())
        .catch(err => console.log(err))
        setEdit(true)
        setTitle(title)  
}

  return (

    <li>
      <div className="mt-7 ml-3 flex justify-between">
        <label className="inline-flex items-center ">
          <input
           onClick={updateTask}
            type="checkbox"
            className=" h-6 w-5 accent-violet-200  hover:accent-violet-200  border-0 rounded-md focus:ring-0"
          />

          <span className={ completed ? "ml-4 text-lg"  : "ml-4 text-lg line-through"} >{title}</span> 
         
        </label>

        <div className="">
          <button onClick={deleteTask} className="mx-4   text-purple-700 hover:text-white hover:bg-purple-600 p-1 px-2 rounded">
            
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
              />
            </svg>
          </button>
          <button onClick={editTask} class=" text-purple-700 hover:text-white hover:bg-purple-600 p-1 px-2 rounded">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
              />
            </svg>
          </button>
        </div>
      </div>
    </li>

  )
}

export default Task

Вернуться на верх