Cannot read properties of undefined (reading ‘value’). I am facing this error and not finding a way to fix it. I am trying to build a todo app using react js. Below is the app.js code…
import "./App.css";
function App() {
const [inputValue, setInputValue] = useState("");
const [addTodo, setAddTodo] = useState([]);
console.log(inputValue);
return (
<div classNameName="screen-background-color">
<div className="app-content-background">
<div className="todo-list-heading">
<h1>To-Do List</h1>
<img className="todo-image-styles" src="./images/icon.png" alt="" />
</div>
<div className="input-and-btn-styles">
<input
value={inputValue}
onChange={setInputValue((e) => e.target.value)}
className="input"
type="text"
placeholder="Add Your Task"
/>
<button onClick={setAddTodo(inputValue)} className="add-btn">
Add
</button>
</div>
<div className="unchecked-image-and-text">
<img
className="unchecked-image"
src="./images/unchecked.png"
alt=""
/>
<h4 className="unchecked-h5-heading">{addTodo}</h4>
</div>
</div>
</div>
);
}
export default App;
2
Answers
you’re incorrectly setting the
onChang
e handler. The correct syntax is to pass a function that updates the state based on the event. You’ve currently passed the result ofsetInputValue((e) => e.target.value)
directly to onChange, which is incorrect.Similarly, in your button component, you’re directly calling
setAddTodo(inputValue)
in theonClick
handler, which is also incorrect.Your onchange is incorrect, instead of this:
it should be this:
onChange={(e) => setInputValue(e.target.value)}
(e) => denotes a function that is being created