How to alter the functional component in the class if I have these three lines?

I have a functional component SignupForm. But I need to convert it into a component class.

I know that the class component must have:
- the line is like this: class SignupForm extends React.Component
- the method render()

But I still have:
1) const history = useHistory();
2) history.push("/home"); in method onSubmit
3)
const {handleSubmit, values, handleChange, errors, handleBlur} = useFormik({ /.. });


And I don't know how to alter the functional component in class component these three lines. How to do it?

A small part SignupForm.js:

const SignupForm = () => {

 const history = useHistory();
 const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({ 
 initialValues: {
/........
},
 validateOnBlur: false,
/........
 validationSchema: yup.object().shape({ 
 username: yup.string() 
 .required('This field is required'),
/........
 }), 
 onSubmit: async (formValues) => {
 try {
 const res = await API('", {
/........
});
 if(){ 
/.......
 } else {

history.push("/home");
}
 } catch(e) { 
/........
 } 
 }, 
});

 return (

 <form onSubmit={handleSubmit}> 
<SignupInput
/.......
inputProps={{
name:'username',
 value: values.username
 onBlur: handleBlur,
/.......
 }} error={errors.username} />
 <button type="submit" disabled={isSubmitting}>Submit Form</button>
</form>
);
};
April 19th 20 at 12:11
1 answer
April 19th 20 at 12:13
Solution
Why do you need to alter a component in a class? It is not clear.

1. useHistory can be replaced by:
import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
...

 render() {
 const { history } = this.props;
...
}
}

export default withRouter(MyComponent);

2. history.push - to replace is not necessary.
3. Have Formik is HOC withFormik() https://jaredpalmer.com/formik/docs/api/withFormik.

Find more questions by tags SolidWorks