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}
        </>
    )
}

I suspect your app is freezing because you're creating multiple new renders on each render by mutating state inside of a useEffect hook with no declared dependencies. — coreyward
– coreyward, Commented Jun 4, 2021 at 17:08

Taki · Accepted Answer · 2021-06-04 17:10:34Z

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(() => {
  // ....
}, []);

answered Jun 4, 2021 at 17:10

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to type in input field React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related