samedi 30 octobre 2021

input check not working with react and I'm not sure how to get it working

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