This is a component code that has a form. We spied the video tutorial how to use the React-Hook-Forms library, because “it’s so easy.” It seems like everything turned out, but there is one nuance: REGISTER does not receive data that has a form. Instead of any numbers that there is there, this result is coming out:
As you can see the value of Coverage: 0, it should be 2500, as well as with the value of the price, which is calculated. Why do such difficulties arise and how to fix them?
Answer 1
You need to collect data and shift to another component, which is not even parent. To collect data, I wanted to use forms, but as I was suggested in the comments – this is an excessiveness.
Then I created a context, as well as a kind of repository that wrapped the entire application:
import {insuranceitemcontext} from './context/insuranceItemContext';
FUNCTION APP () {
Const [State, Dispatch] = react.usereducer (NULL);
Return (
& lt; browserrouter & gt;
& lt; InsuranceItemContext.Provider Value = {{state, dispatch}} & gt;
& lt; div classname = 'app' & gt;
& lt; Header / & gt;
& lt; Section / & gt;
& lt; footer / & gt;
& lt; / div & gt;
& lt; /insuranceitemcontext.provider>
& lt; / browserrouter & gt;
);
}
And so that the data in the repository can be changed in the child components it was decided to use Usereducer ()
and transfer the condition and f-subsidiaries.
So I solved the data collection problem in the component, which was provided initially in the question. Because I transmitted data by pressing the button to a global state through Dispatch
.
import {insuranceitemcontext} from "../../../../context /..InsuranceItemContext";
EXPORT DEFAULT FUNCTION CALCULATEFORM (PROPS) {
const {state, dispatch} = USCONTEXT (InsuranceItemContext);
Return (
{/ * Some Code * /}
& lt; input onClick = {() = & gt; DISPATCH ({
Coverage: CoverageValue,
risk: props.risk,
price,
title: props.title
})} Type = 'submit' name = 'submit' className = 'submit' / & gt;
{/ * Some code * /}
);
}