React-Form | 动态构建表单 , React拖拽在线表单设计器.在线预览 https | Frontend Framework library

I am building a form in React using React-form-hook and validation using yup.

I am using a watch() to check if the checkbox is clicked or not and if it is clicked it will display another input field in the form which was not visible before.

Even when I haven't clicked the checkbox which means that refer input field is not visible or rendered, it still does not perform the handlesubmit.

I can't think of a way to get around this.

I'm trying to use 'FormProvider' to connect the form to a child component input. I created the exact same sample from the React-Form-Hook Docs and when trying to submit the form, it doesn't recognize the child component input. What I'm missing here?

Here is my code:Sample Code

I have a multi-step form using kendo and basically what i want to do is to pass the values from the function Charging to one of the steps so i can use the user inputs in a fetch API GET request. Normally i would have done it with props, but the thing here is that i am passing data from a function. I tried useContext but i can't make it work and i went through the kendo form code many times in order to grasp its methodology but i still can't pass the values. I am getting the values from onStepSubmit() handler and i can get them outside this callback with useState, but even then i can't pass them.

Here is the code for the main function where i get the values

I used https://github.com/M0kY/react-form-stepper npm package. I want to create a step form.

I'm trying to import a package into my Rails 6 project – I'm on Rails 6.0.3.4 and webpacker 5.2.1 gem.

• The package is installed yarn add @shopify/react-form
• It's imported into the file import {useForm, useField} from '@shopify/react-form';
• Now after running ./bin/webpack-dev-server

I get this:

I have created dynamic fields from JSON data, and I am successfully rendering on UI

• Initially all the fields are disabled.
• Once I click on edit I am making particular row editable which is working fine
• On click of cancel what I want to do is make the fields disabled again and it should take the previous (initial value)

Issue

When I click on cancel I am setting the initial data aging but it is not taking, I am using react-form-hook for form validation, there we have reset() function but that too is not working.

What I am doing is

Getting data from main component and setting it to some state variable like below

I am working with a checkbox in react.

I am making my checkbox using dynamic data I am getting from a server and accordingly showing checked and unchecked states on the UI.

For form validation, I am using react-form-hook and for getting data onSubmit, I am using handleSubmit from react-form-hook

My only issue is that I am not able to get data as per my requirement.

My data:

Is it possible to have dynamic type? I have a json like this

MRE -> node-server : react app

When I send a POST request using Postman, I get the expected result. This is the request that I am sending using Postman

and test sent gets printed to the console of my node server

If I send a request from my react form however, test sent does not print to the console, but the catch block of my fetch request get's executed and err is printed to the console of my react app, followed by {}.

I would like to know why my POST request is not working and is not getting received by the server

Below is the function that I call when someone clicks the submission button of my form created in react

Function called on form submission