Reset React-Select (Unform) after submit

Question

I'm studying ReactJS and Typescript, and also a lib for forms called Unform (https://github.com/Rocketseat/unform).

I have a form with some fields, including a Select field (https://react-select.com/). My problem is: How to clear this react-select field after submitting the form?

My project repository: https://github.com/fredarend/icetec-frontend

The form is at: src/pages/Dashboard/indext.tsx and the Select component is at src/components/Select/index.tsx.

Note that in the Dashboard index I have already used the formRef.current?.Reset() after sending the data to the API, however, it is only resetting the inputs, Select does not continue to be filled.

I'm not able to implement anything that works, maybe someone has already done it?

Thanks in advance for your help!

Answer 1

Here is what you can do:

On your Dashboard --> index.js handleSubmit, under formRef.current?.reset(); add the following:

formRef.current?.reset()

//add these 2 lines:

const select = formRef!.current!.getFieldRef('technologies');
select.select.clearValue()

This will allow you to grab the react-select component by its ref and to reset it.