React Input state is not clear how can i clear input state

user_15825020 0
Viewed 67

As you can see, I am using react-redux for todo. My app is working perfectly, but the problem is, when I click on the add button the input value is not cleared. How do I solve this problem?

    import React, { useState } from "react";
    import { AddTodo, DeleteTodo, RemoveTodo } from "./actions";
    import { useDispatch } from "react-redux";
    
    const Todo = () => {
      const [inputData, setInputData] = useState();
      const dispatch = useDispatch();
      return (
        <div className="container">
          <div className="mt-3">
            <div className="row">
              <div className="col-5 col-md-8 col-sm-12 m-auto">
                <div className="card shadow-lg">
                  <div className="card-header bg-warning">
                    <h2 className="text-center fw-bolder text-primary">
                      Todo List
                    </h2>
                    <div className="row my-2">
                      <div className="input-group">
                        <input
                          type="text"
                          className="form-control"
                          placeholder="You can add todo Here...."
                          onChange={(e) => setInputData(e.target.value)}
                        />
                        <button
                          className="btn btn-success"
                          onClick={() => dispatch(AddTodo(inputData), setInputData(""))}
                        >
                          <i className="fa fa-plus"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div className="card-body">
                    <ul className="list-group text-center fw-bolder">
                      <li className="list-group-item">Girish</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
    
  export default Todo;

I imported in-app and the app is the main component. What can I do to solve my problem?

use-state react-redux reactjs
4 Answers

This happened because you were using setInputData("") inside of dispatch:

  import React, { useState } from "react";
    import { AddTodo, DeleteTodo, RemoveTodo } from "./actions";
    import { useDispatch } from "react-redux";
    
    const Todo = () => {
      const [inputData, setInputData] = useState();
      const dispatch = useDispatch();
      return (
        <div className="container">
          <div className="mt-3">
            <div className="row">
              <div className="col-5 col-md-8 col-sm-12 m-auto">
                <div className="card shadow-lg">
                  <div className="card-header bg-warning">
                    <h2 className="text-center fw-bolder text-primary">
                      Todo List
                    </h2>
                    <div className="row my-2">
                      <div className="input-group">
                        <input
                          type="text"
                          className="form-control"
                          placeholder="You can add todo Here...."
                          onChange={(e) => setInputData(e.target.value)}
                        />
                        <button
                          className="btn btn-success"
                          onClick={() => {
                            dispatch(AddTodo(inputData));
                            setInputData("")
                          }
                        >
                          <i className="fa fa-plus"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div className="card-body">
                    <ul className="list-group text-center fw-bolder">
                      <li className="list-group-item">Girish</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
    
  export default Todo;
user_164200180

Try changing your on click.

onClick={() => {dispatch(AddTodo(inputData)); setInputData("")}}

You had your setInputData inside the dispatch function.

user_56009300

You can create a onClick handler to solve this.

const handleClick = () => {
    dispatch(AddTodo(inputData); 
    setInputData("");
}

<button onClick={handleClick}></button>
user_51468480

I got it my Answer I should add use value={inputData} i mean

<input
     type="text"
     className="form-control"
     placeholder="You can add todo Here...."
     value={inputData}
     onChange={(e) => setInputData(e.target.value)}
   />

here is the answer

user_158250200
Related