CODEWITHSUNDEEP
reactjsformsreact-hooks
karthik P
karthik P

Reputation: 11

Onchange in input field is not working while editing a form

I am developing a small application in react, in which I have an edit option. On clicking the edit button, it will load the existing data and allows the user to edit any of the fields and submit. Fetching the data and loading it in a form are working fine, but when I edit a textbox, the value changes to the existing fetched value, and it is not allowing me to hold the edited value. Please note, the problem is with editing the input in a form not in submitting. Below is the edit component that I am using.

mport { useState, useEffect } from 'react';
import { json, Link } from 'react-router-dom';
import { useParams } from 'react-router-dom';
const EditTask = ({ onEdit }) => {
  const [text, setText] = useState('');
  const [day, setDay] = useState('');
  const [reminder, setReminder] = useState(false);
  const params = useParams();

  useEffect(() => {
    fetchTask();
  });
  const fetchTask = async () => {
    const res = await fetch(`http://localhost:5000/tasks/${params.id}`);
    const data = await res.json();
    setText(data.text);
    setDay(data.day);
    setReminder(data.reminder);
  };

  const onSubmit = async (e) => {
    e.preventdefault();
    if (!text) {
      alert('Please enter task name');
      return;
    }

    onEdit({ text, day, reminder });
    setText('');
    setDay('');
    setReminder(false);
  };

  const handleChange = ({ target }) => {
    console.log(target.value); // displaying the input value
    setText(target.value); // changes to existing value not the one I entered
  };

  return (
    <form className="add-form" onSubmit={onSubmit}>
      <div className="form-control">
        <label>Task</label>
        <input
          id="AddTask"
          type="text"
          placeholder="Add Task"
          value={text}
          onChange={handleChange}
        />
      </div>
      <div className="form-control">
        <label>Date & Time</label>
        <input
          id="Date"
          type="text"
          placeholder="Date & Time"
          value={day}
          onChange={(e) => setDay(e.target.value)}
        />
      </div>
      <div className="form-control form-control-check">
        <label>Set Reminder</label>
        <input
          id="Reminder"
          type="checkbox"
          checked={reminder}
          value={reminder}
          onChange={(e) => setReminder(e.currentTarget.checked)}
        />
      </div>
      <input className="btn btn-block" type="submit" value="Save Task" />
      <Link to="/">Home</Link>
    </form>
  );
};

export default EditTask;

Can someone explain what I am missing here? Happy to share other information if needed.

Expecting the input fields to get the value entered and submitting.

Upvotes: 1

Views: 131

Answers (1)

kyun
kyun

Reputation: 10294

You missed adding dependency to useEffect

Yours

 useEffect(() => {
        fetchTask()
    }
 )

Should be changed

useEffect(()=>{
  fetchTask()
}, [])

becasue of this, fetchTask is occured when view is re-rendered.

Upvotes: 2

Related Questions