如何在 React.js 中创建动态（条件）占位符

Question

So I have a submit form where the user needs to create a task by typing in a task name. I want it to be empty at the beginning and have a placeholder of "you must enter a task" when the user click add without entering anything. Now I can achieve it to display the placeholder but it's either always there or I encounter unreachable code. I know how to clean the submission & return to the add function, just need to be able to display the placeholder conditionally. Here's what my code looks like atm:

import { useState } from "react";

export default function Todos() {
  const [todos, setTodos] = useState([{ text: "hey" }]);
  const [todoText, setTodoText] = useState("");
  const [isEmpty, setEmpty] = useState("false");

  const addTodo = (e) => {
    e.preventDefault();
    if (todoText){
    setTodos([...todos, { text: todoText }]);
    setTodoText("");
    
  } else {
      setEmpty(true)
      setTodoText("");
      return
  }
  
} 

  

  return (
    <div>
      {todos.map((todo, index) => (
        <div key={index}>
          <input type="checkbox" />
          <label>{todo.text}</label>
        </div>
      ))}
      <br />
      <form onSubmit={addTodo}>
        <input
          
          value={todoText}
          onChange={(e) => setTodoText(e.target.value)}
          type="text"
        ></input>
        <button type="submit">Add</button>
        {isEmpty &&<span style={{ color: "red" }}>Enter a task</span>}
      </form>
    </div>
  );
}

Answer 1

I could change your code with the following:

You need to initialize isEmpty by false instead of string "false" .

And you can use this flag on showing placeholder texts.

Note that I renamed isEmpty by showError .

import { useState } from "react";

export default function Todos() {
  const [todos, setTodos] = useState([{text: "hey"}]);
  const [todoText, setTodoText] = useState("");
  const [showError, setShowError] = useState(false);

  // @ts-ignore
  const addTodo = (e) => {
    e.preventDefault();

    if (todoText) {
      setTodos([...todos, {text: todoText}]);
      setTodoText("");
      setShowError(false);
    } else {
      setTodoText("");
      setShowError(true);
      return
    }
  }

  return (
    <div>
      {todos.map((todo, index) => (
        <div key={index}>
          <input type="checkbox"/>
          <label>{todo.text}</label>
        </div>
      ))}
      <br/>
      <form onSubmit={addTodo}>
        <input
          value={todoText}
          onChange={(e) => setTodoText(e.target.value)}
          type="text"
        ></input>
        <button type="submit">Add</button>
        {(showError && !todoText) && <span style={{color: "red"}}>Enter a task</span>}
      </form>
    </div>
  );
}