Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Form Submission | Formik
Expert React

Challenge: Form Submission

Task

Add the logic to handle the form submission. Since we are not working with a real server, we will display the form data in the console and in the alert. Follow the steps below:

  • Target the input field value responsible for the user's first name and assign its value to the userName variable.
  • Target the input field value responsible for the user's last name and assign its value to the userLastName variable.
  • Target the input field value responsible for the user's mail and assign its value to the userMail variable.
Hint
1. To retrieve the value of the input field responsible for the user's first name, use the values.firstName.

2. To retrieve the value of the input field responsible for the user's last name, use the values.lastName.

3. To retrieve the value of the input field responsible for the user's email, use the values.mail.

Everything was clear?

Section 4. Chapter 12
course content

Course Content

Expert React

Expert React

1. React Key Concepts

Course OverviewReact ComponentApproaches to Styling in React AppsReact HooksReact ContextLocal Development Environment

2. React Router

Fundamentals of RoutingGet Started with React RouterBasic RoutingLazy LoadingNavigationRoutes Basic Concepts Sum UpChallenge: Route Basic ConceptsQuery StringModify Query StringReact Router Section Sum Up

3. Redux Toolkit

Introduction to ReduxGetting Started with Redux ToolkitReal DealStoreActionsReducerInvolve Redux into ReactChallenge TimeChallenge: StoreChallenge: ActionsChallenge: ReducerChallenge: Involve Redux into ReactRedux Toolkit Section Sum Up

4. Formik

Powerful Form Library for ReactGet Started with FormikCustom Formik HookInvolve Formik into React componentAdd Initial ValuesForm SubmissionForm ValidationChallenge OverviewChallenge: useFormik HookChallenge: Binding Formik with React ComponentChallenge: Add Initial ValuesChallenge: Form SubmissionChallenge: ValidationFormik Section Sum Up

5. Jest

Introduction to Testing in ReactGet Started with JestCreate the Jest Test FileFirst Test CaseSecond Test CaseChallenge: Third Test CaseJest Section Sum Up

6. Next Steps

What is next?

Challenge: Form Submission

Task

Add the logic to handle the form submission. Since we are not working with a real server, we will display the form data in the console and in the alert. Follow the steps below:

  • Target the input field value responsible for the user's first name and assign its value to the userName variable.
  • Target the input field value responsible for the user's last name and assign its value to the userLastName variable.
  • Target the input field value responsible for the user's mail and assign its value to the userMail variable.
Hint
1. To retrieve the value of the input field responsible for the user's first name, use the values.firstName.

2. To retrieve the value of the input field responsible for the user's last name, use the values.lastName.

3. To retrieve the value of the input field responsible for the user's email, use the values.mail.

Everything was clear?

Section 4. Chapter 12
some-alt