Unable to type in input field React

Question

I am creating a simple todo list. In here there is a modal for the update form,I can take the relevant values from the state And set them to the input field values. then I can't edit the input fields. I think the problem is with the onChange function or value property

import React from 'react'
import {useRef,useState,useEffect} from 'react'
import {FaTimes} from 'react-icons/fa'

export const Modal = ({edData,showModal,setShowModal,onAdd,setEd,tasks}) => {
      

     

        const [text,setText] = useState('')
        const[day,setDay] = useState('')
        const[reminder,setReminder] = useState(false)

    
      
        useEffect(() => {
            
                if(edData!=null){

                    for(let i=0;i<tasks.length;i++)
                    {
                      if(tasks[i].id===edData){
                        // console.log(tasks[i])
                        
                        setText(tasks[i].text)
                        setDay(tasks[i].day)
                        setReminder(tasks[i].reminder)
                      }
                    }
        
                }   
               

                // inputText.current.value = edData.text;
                // inputDay.current.value = edData.day;
                // inputReminder.current.value = edData.reminder;
             
             
          });
        
        const closeModal = () =>{
            setEd(null)
            setShowModal(prev=>!prev)
            setText('')
            setDay('')
            setReminder(false)

        }
    
  
    const onSubmit = (e) =>{
        e.preventDefault()

        if (!text){
            alert('Please add a task')
            return
        }
        onAdd({text,day,reminder})

        setText('')
        setDay('')
        setReminder(false)

        
       
            setShowModal(prev=>!prev)
        
       
    }
    return (
        <>
            {showModal? 
                <div className="background">
                    <div className="ModalWrapper" >
                       

                        <div className="ModalContent">
                            <h2 className="modalTitle">{edData==null? 'Add New Task':'Update Task'}</h2>
                        <form className="add-form" onSubmit={onSubmit}>
                            <div className="form-control">
                                <label htmlFor="">Task</label>
                                <input type="text"  placeholder="Add Task" name="" id=""   value={text} onChange={(e) => setText(e.target.value)}/>
                            </div>
                            <div className="form-control ">
                                <label htmlFor="">Date & Time</label>
                          



                                <input type="text"  placeholder="Add Date and Time" name="" id="" value={day} onChange={(e) => setDay(e.target.value)}/>
                            </div>
                            <div className="form-control form-control-check">
                                <label htmlFor="">Set Reminder</label>
                                <input type="checkbox" checked={reminder} name="" id="" value={reminder} onChange={(e) => setReminder(e.currentTarget.checked)}/>
                            </div>
                         
                            <input className="btn btn-block" type="submit" value="Save Task" />
                            
                            
                        </form  >

                        </div>
                       
                        <div className="CloseModalButton" onClick={closeModal}>
                            <FaTimes/>
                        </div>

                    </div>


                </div>
                
                
                
            : null}
        </>
    )
}

Answer 1

If you don't pass a dependency array to useEffect it will be called on every render, calling setText inside of it and overwriting the input's value, pass an empty array to useEffect if you don't want it to run on every render :

useEffect(() => {
  // ....
}, []);