I have a form made with React Bootstrap to semply submit a string that will be saved on a DB. It works and the submitted message is saved, but I don't know how to clear the textarea when the message is submitted.
As you can see, what I tried to do is to use the useState hook to set an empty value but after the form is submitted the string is still visible in the textarea. Is there any way to do this?
const Form = (props) => {
const [isLoading, setLoading] = useState(false);
const [value, setValue] = useState(props.value);
const handleSubmit = async event => {
setLoading(true);
event.preventDefault();
const res = await fetch(
// here I call the api
)
result = await res.json();
setValue(null);
setLoading(false);
};
return (
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="text">
<Form.Control as="textarea"
required
type="text"
placeholder=""
defaultValue={value}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
disabled={isLoading}
>
{isLoading ? 'Saving...' : 'Save'}
</Button>
</Form>
)
}
export default Form;
To my eye, your textarea is currently uncontrolled, and so any changes made to value won't be updated in the Form.Control component.
<Form.Control
as="textarea"
rows={3}
value={value}
onChange={e => {
setValue(e.target.value);
}
/>
Rather than using the defaultValue prop, I would probably use setValue(props.value) to reset value in your handler function.
Remove value from props - Form component should hold this state. Then, for controlled input you need to change "defaultValue" to "value" on Form.Control. Also add onChange and set the value. On form submit you can set your value state to empty string, not null: