How to pass props from react class to formik? - reactjs

Question

I am trying to pass some props from React class to my functional component which is formik and then I want to add some callback function to get those data back on text changed. But not sure how can i make this done. Please check my below code:
Here is my Main.jsx class
// Some imports were removed to keep everything looks cleaner
import RegisterAccount from "RegisterAccount.jsx";
class Main extends React.Compoenent {
constructor(props) {
super(props);
this.state = {
username: "This is username value..."
}
}
render() {
return (
<Container fluid>
<Switch>
<Route exact path="/register" component={RegisterAccount} data={this.state.username} />
</Switch>
</Container>
)
}
}
export default Main;
Here is my RegisterAccount.jsx
// Some imports were removed to keep everything looks cleaner
import { Form as FormikForm, Field, withFormik } from "formik";
import * as Yup from "yup";
const App = ({ values, errors, touched }) => (
<FormikForm className="register-form " action="">
<h3 className="register-title">Register</h3>
<Form.Group className="register-form-group">
<Field
name="username"
type="text"
placeholder="USERNAME"
className="form-control rounded register-form-control"
/>
{touched.username && errors.username && <p>{errors.username}</p>}
</Form.Group>
</FormikForm>
);
const FormikApp = withFormik({
mapPropsToValues({ username, email, password, confirmPassword }) {
return {
username: username || ""
};
},
validationSchema: Yup.object().shape({
username: Yup.string()
.min(6)
.max(32)
.required()
.test("username", "error message of username", async value => {
return true;
})
})(App);
export default FormikApp;

Answer 1

It looks like the issue you're seeing isn't from Formik, but from React Router. Your Route won't pass props in as data the way you have it:
<Route exact path="/register" component={RegisterAccount} data={this.state.username} />
Instead, you have to use Route's render prop and pass props directly into the component. This should pass username into mapPropsToValues:
<Route exact path="/" render={() => <RegisterAccount username={this.state.username} />} />