"False" appearing in input after removing its text

AglecikNaplecik 0
Viewed 19

After inserting text in input and later removing it completely with backspace "false" appears in it. It cannot be removed - after removing last letter it appears again. It appears in input which are rendered using map() method. The same problem doesn't occur in textarea which is not rendered using this method so I guess the problem lays somewhere here, but I dont have idea where.

export default function AddTodo({ active, setActive }: AddTodoProps) {
  const { isDarkMode } = useContext(DarkModeContext);
  const [todoDetails, setTodoDetails] = useState({
    task: "",
    description: "",
    name: "",
    deadline: "",
  });
  const { submitTodo, loading, status } = useAddTodoToDb(todoDetails);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setTodoDetails((prev) => {
      return {
        ...prev,
        [e.target.id]: e.target.value || e.target.checked,
      };
    });
  };
  useEffect(() => {
    if (typeof status == "string")
      setTodoDetails({
        task: "",
        description: "",
        name: "",
        deadline: "",
      });
  }, [status]);

  return (
      {todoInputs.map((item) => {
        return (
          <StyledLabelAndInput
            isDarkMode={isDarkMode}
            err={status?.includes(item.id)}
            key={item.id}
          >
            <label htmlFor={item.id}>{item.text}</label>
            <input
              value={todoDetails[item.id as keyof ITodoDetails]}
              type={item.type}
              id={item.id}
              min={today}
              onChange={(e) => handleChange(e)}
            />
          </StyledLabelAndInput>
        );
      })}
      <label htmlFor="description">Description (optional)</label>
      <textarea
        value={todoDetails.description}
        id="description"
        onChange={(e) =>
          setTodoDetails((prev) => {
            return {
              ...prev,
              description: e.target.value,
            };
          })
        }
      />
reactjs
1 Answers

The false value is comming from the input's checked attribute.

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setTodoDetails((prev) => {
      return {
        ...prev,
        [e.target.id]: e.target.value || e.target.checked, /* <--- HERE */
      };
    });
  };

You're trying to get the input's value OR checked, and since the input has no value it's returning the checked attribute, which is false by default.

Instead you'll need to check if the item type is checkbox before using the checked attribute.

Tiagocf20
Related