I have an error Cannot read properties of undefined (reading 'target') for this code:
const [title, setTitle] = useState("");
const handleChangeTitle = (e) => {
setTitle(e.target.value);
};
useEffect(() => {
handleChangeTitle()
}, [title]);
return (
<div className="App">
<input
name="title"
type="text"
value={title}
onChange={handleChangeTitle}
/>
<p>{title}</p>
</div>
);Remove the useEffect altogether. useEffect is for lifecycle events such as on initial render. What you're doing is when the input changes you update your state. That's fine call handleChangeTitle exactly as you are doing. However, your useEffect has a dependency on the title variable. That means anytime it changes it will fire every time that variable's value changes.
input -> value change -> handleChangeTitle updates state "title" -> useEffect fires -> calls handleChangeTitle AGAIN -> cycle over and over until app crashes
Besides the already called out missing parameter to handleChangeTitle there is nothing wrong with your code. It's working as intended. It's just flawed in its design. I would suggest reading up on the correct usage of each hook here
you are already watching [title] inside you useEffect , whenever onChange event fired the function will called , as Szymon Said you don't your onChange inside your useEffect