React Form, my wrong way

Today I had to face form definition in react and I was afraid to some kind of repeatitive task.
I looked for in in google, I found formik, react-redux-form, but I see it too complex, or too heavy.

I am using reactstrap for frontend and maybe there is a premium library for form, but I am not sure about how it plays with redux.

Also I do not want realtime link with redux store, but an edit mode then a submit action. In this way I can provide a “cancel” with no pain.

First approach was to useRef, that is it. I put them in an array of fieldElements, just fe because I must write it multiple time (no escape here: multiple input elements).

Also I useSelector for a fieldValues array (again, fv here).

Array of useRef() hooks

It worked. Then I defined an array, the same is used for defining refs and values:

Then I cleaned up some code:

(fe, field element, became fr, field reference, also)

At the end I see a coupled data in redux storage and the form, I can take storage field list, maybe, not sure
about what happen with innerRef={undefined}, it should give error so that I can find it immediately.
Unfortunately I have no error, I should find some other mean for dealing with it.

There is no validation here, I plan to manage validation in redux-observable eventually, adding some kind of isvalidtagmessage near each field, again using array, useSelector(), the same way. I will see.


Posted

in

by