React

by sanat gupta

HTML

<div id="app"></div>

React

const SearchInput = () => {
  const [taskValue, setTaskValue] = React.useState("");
  const [allTasks, setAllTasks] = React.useState([]);

  const handleChange = (e) => {
    setTaskValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (taskValue !== "") {
      setAllTasks([
        ...allTasks,
        { id: allTasks.length + 1, text: taskValue.trim() },
      ]);
    }
    setTaskValue("");
    console.log(allTasks);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Add a task..."
          value={taskValue}
          onChange={handleChange}
        />
        <button>Submit the Task</button>
      </form>
      <div>
        {allTasks.length <= 0 ? (
          <p>No tasks</p>
        ) : (
          <ul>
            {allTasks.map((task) => (
              <li key={task.id}> {task.text} </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
};

ReactDOM.render(<SearchInput />, document.querySelector("#app"))