Clearing Input after submit With react hooks

Question

How do I clear the input after button submit? The text I input is still there after I submit.

Many thanks in advance and greatly appreciated. Thanks again

const [value, setValue] = useState("");

 const handleInput = e => {
        setValue(e.target.value);
      };

    const onSubmit = (e) => {
        e.preventDefault();
        setValue("");
      }
    

    {
 dbdata.map(item => {
                    return(
                        <div className="card mb-5" key={item._id} style={{maxWidth:"70%",height:"70%"}} >
                            <img src={item.photo} className="card-img-top" alt="..." style={{maxWidth:"100%",height:"100%"}} />
                            <div className="card-body" >
                                <h6 className="card-text">{item.reviews.length} Reviews
                                <form className="input-group mb-3" onSubmit={onSubmit}>
                                    <input type="text" className="form-control" placeholder="add a post onChange={handleInput}  value={value} />
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary" onClick={(e) => {
                                          makePost(value, item._id)}} type="button">Post</button>
                                    </div>                    
                                </form>
                            </div>
                        </div>

                    )
                })
}

VersifiXion · Accepted Answer · 2020-11-27 14:12:28Z

2

You can try to add a form tag with a onSubmit function, which inside sets the value as an empty string after preventing the default behavior of submitting a form

Edit: I see you have a makePost function, I think you can move the code of this function inside of my onSubmit one or putting my code inside of your makePost function

const [value, setValue] = useState("");

 const handleInput = e => {
        setValue(e.target.value);
      };

  const onSubmit = (e) => {
    e.preventDefault();
    setValue("");
  }

<div className="input-group mb-3">
<form onSubmit={onSubmit}
   <input type="text" className="form-control" placeholder="add a post" onChange={handleInput} value={value} /></form>
        <div class="input-group-append">
          <button type="submit" class="btn btn-primary" onClick={(e) => {makePost(value, item._id)}} type="button">Post</button>
        </div>                    
</div>

edited Nov 27, 2020 at 14:12

answered Nov 27, 2020 at 14:04

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nat Over a year ago

it didn't get reset or clear the input after post

VersifiXion Over a year ago

Oh I just saw that the value is not binded to your input, is that normal ? You should have an attribute value with the value in your input tag, like : <input value={value} />

VersifiXion Over a year ago

I think you should copy paste your whole component because some stuff is missing

Nat Over a year ago

No worries, after I added the value={value}, all input has the same values. It is because I am iterating using data.map, so therefore there are many inputs. It is for reviewing products. Thanks

VersifiXion Over a year ago

is your whole component very big ? Copy paste the whole thing if you can, then it will help us to see everything

|

Collectives™ on Stack Overflow

Clearing Input after submit With react hooks

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related