I have a component CreateTodo
import React, { useState } from 'react';
const CreateTodo = () => {
const [todoIsChecked, setTodoIsChecked] = useState(false);
const [todo, setTodo] = useState('');
const changeTodoStatus = (e) => {
console.log(e.target.checked);
};
const writeTodo = (e) => {
setTodo(e.target.value);
};
const saveTodo = () => {
setTodoIsChecked(false);
const newTodo = { body: todo, isChecked: todoIsChecked };
todos.push(newTodo);
localStorage.setItem('todos', JSON.stringify(todos));
};
return (
<form onSubmit={saveTodo}>
<input
type='checkbox'
checked={todoIsChecked}
onChange={changeTodoStatus}
/>
<input
type='text'
placeholder='Add todo here'
name='todo'
value={todo}
onChange={writeTodo}
/>
<button onClick={saveTodo}>Add</button>
</form>
);
};
export default CreateTodo;
When I render this component I get the following error...
Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
I tried doing defaultChecked
instead of checked
and I just get errors as well. What is going on I am drawing a blank because I see others using it the same way I have it.
Aucun commentaire:
Enregistrer un commentaire