How to setField value on Multistep form using formik? - formik

Question

I am trying to create multistep form using formik but i am not able to
set form value when on click serach button. when i click search button
then i am set the data and i want to auto field make and model field
how can i do ????
here is my stepper.js page--
const renderStep = (
step,
values,
SearchButtonClick,
setFieldValue,
vehicleData
) => {
switch (step) {
case 1:
return <Form1 values={values} />;
case 2:
return (
<Form2
values={values}
SearchButtonClick={SearchButtonClick}
setFieldValue={setFieldValue}
vehicleData={vehicleData}
/>
);
default:
return <Form1 values={values} />;
}
};
const Stepper = () => {
const [step, setStep] = useState(1);
const [vehicleData, setVehicleData] = useState({});
function SearchButtonClick(data) {
const value={
"vehicleId": "V1",
"rcNo": "OD01AB1234",
"chassisNo": "ODXYZ123",
"engineNo": "ENABC012",
"make": "HYUNDAI MOTOR INDIA LTD ",
"model": "HYUNDAI SANTRO",
"fuel": "PETROL",
"vehicle_type": "Motor Car",
"pollutionNorms": "Not Available",
"mfgYear": 2017
}
setVehicleData(value)
}
const formData = {
PolicystartDate: "",
PolicyendDate: "",
regNo: "OD01AB1234",
make: "",
model: "",
};
function handleSubmit(values) {
debugger;
setStep((step) => step + 1);
console.log({
...values,
PolicystartDate: moment(values.PolicystartDate).toISOString(),
PolicyendDate: moment(values.PolicyendDate).toISOString(),
});
}
return (
<MainWrapper>
<>
{/* <Header title="Multi Step Form using React And Formik" /> */}
<Formik
enableReinitialize
initialValues={{ ...formData }}
onSubmit={handleSubmit}
>
{({
errors,
touched,
isSubmitting,
setFieldValue,
setFieldTouched,
values,
...rest
}) => (
<Form>
{renderStep(
step,
values,
SearchButtonClick,
setFieldValue,
vehicleData
)}
<StepButton step={step} />
</Form>
)}
</Formik>
</>
</MainWrapper>
);
};
export default Stepper;
here is my first Form ----
function Form1(props) {
console.log(props);
return (
<>
<PageHeader
style={{
border: "1px solid rgb(235, 237, 240)",
}}
title="Cover"
/>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div
style={{
height: "100%",
width: "30%",
marginLeft: "15px",
}}
>
<Field
name="PolicystartDate"
label="Policy Start Date"
component={DatePicker}
isColumn
width={"100%"}
value={props.values.PolicystartDate}
inlineLabel
style={{
flexBasis: "80%",
height: "33px",
width: "100%",
marginTop: "4px",
}}
/>
<Spacer />
<Field
name="PolicyendDate"
label="Policy End Date"
component={DatePicker}
isColumn
width={"100%"}
value={props.values.PolicyendDate}
inlineLabel
style={{
flexBasis: "80%",
height: "33px",
width: "100%",
marginTop: "4px",
}}
/>
<Spacer />
</div>
</div>
</>
);
}
export default Form1;
here is my second form-------
function Form2(props) {
console.log(props);
return (
<>
<StyledLabel>Registration Number</StyledLabel>
<Field
name="regNo"
component={InputComponent}
isColumn
isColumn
style={{
height: "33px",
width: "80%",
}}
/>
<Button
style={{ marginTop: "21px" }}
onClick={() =>
props.SearchButtonClick(props.values.regNo, props.setFiledValue)
}
>
Search
</Button>
<Field
disabled="true"
name="make"
label="Make"
width={"100%"}
isRequired
isColumn
component={InputComponent}
style={{
flexBasis: "80%",
height: "33px",
marginTop: "4px",
}}
/>
<Field
disabled="true"
name="model"
label="Model"
width={"100%"}
isRequired
isColumn
component={InputComponent}
style={{
flexBasis: "80%",
height: "33px",
marginTop: "4px",
}}
/>
export default Form2

Answer 1

set Fields value on Form 2 from props , same as you have setted in Form1
function Form2(props) {
console.log(props);
return (
<>
<StyledLabel>Registration Number</StyledLabel>
<Field
name="regNo"
component={InputComponent}
isColumn
isColumn
style={{
height: "33px",
width: "80%",
}}
/>
<Button
style={{ marginTop: "21px" }}
onClick={() =>
props.SearchButtonClick(props.values.regNo, props.setFiledValue)
}
>
Search
</Button>
<Field
disabled="true"
name="make"
label="Make"
width={"100%"}
isRequired
isColumn
value={props.values.make}
component={InputComponent}
style={{
flexBasis: "80%",
height: "33px",
marginTop: "4px",
}}
/>
<Field
disabled="true"
name="model"
label="Model"
width={"100%"}
isRequired
isColumn
value={props.values.model}
component={InputComponent}
style={{
flexBasis: "80%",
height: "33px",
marginTop: "4px",
}}
/>
export default Form2