<p class="wp-block-paragraph">Today I had to face form definition in react and I was afraid to some kind of repeatitive task.<br>I looked for in in google, I found <a rel="noreferrer noopener" href="https://jaredpalmer.com/formik" target="_blank">formik</a>, <a rel="noreferrer noopener" href="https://redux-form.com/8.3.0/" target="_blank">react-redux-form</a>, but I see it too complex, or too heavy.</p>
<p class="wp-block-paragraph">I am using <a href="https://reactstrap.github.io/" target="_blank" rel="noreferrer noopener">reactstrap</a> for frontend and maybe there is a premium library for form, but I am not sure about how it plays with <a href="https://redux.js.org/" target="_blank" rel="noreferrer noopener">redux</a>.</p>
<p class="wp-block-paragraph">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.</p>
<p class="wp-block-paragraph">First approach was to <code>useRef</code>, that is it. I put them in an array of <code>fieldElements</code>, just <code>fe</code> because I must write it multiple time (no escape here: multiple input elements).</p>
<p class="wp-block-paragraph">Also I <code>useSelector</code> for a <code>fieldValues</code> array (again, <code>fv</code> here).</p>
<figure class="wp-block-image size-large"><img src="https://smartango.com/wp-content/uploads/2020/04/IdeaStartFromRef.png" alt="" class="wp-image-351"/><figcaption>Array of useRef() hooks</figcaption></figure>
<p class="wp-block-paragraph">It worked. Then I defined an array, the same is used for defining refs and values:</p>
<figure class="wp-block-image size-large"><img src="https://smartango.com/wp-content/uploads/2020/04/ThenArrayOfFields.png" alt="" class="wp-image-352"/></figure>
<figure class="wp-block-image size-large"><img src="https://smartango.com/wp-content/uploads/2020/04/UsedInInput.png" alt="" class="wp-image-353"/></figure>
<p class="wp-block-paragraph">Then I cleaned up some code:</p>
<figure class="wp-block-image size-large"><img src="https://smartango.com/wp-content/uploads/2020/04/UUltimatelyCleaned-1024x951.png" alt="" class="wp-image-354"/></figure>
<p class="wp-block-paragraph">(fe, field element, became fr, <strong>f</strong>ield <strong>r</strong>eference, also)</p>
<p class="wp-block-paragraph">At the end I see a coupled data in redux storage and the form, I can take storage field list, maybe, not sure<br>about what happen with <code>innerRef={undefined}</code>, it should give error so that I can find it immediately.<br>Unfortunately I have no error, I should find some other mean for dealing with it.</p>
<p class="wp-block-paragraph">There is no validation here, I plan to manage validation in <a rel="noreferrer noopener" href="https://redux-observable.js.org/" target="_blank">redux-observable</a> eventually, adding some kind of <code>isvalidtagmessage</code> near each field, again using array, <code>useSelector()</code>, the same way. I will see.</p>
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.
