/form-react

Form using react.

Primary LanguageJavaScript

Activity presentation

We are going to put into practice the knowledge we have acquired about creating and handling forms using React. To do this, we will ask you to create a small form that will allow anyone to interact with it by entering the requested data. Once the data has been entered, by clicking on the Submit button, certain validations must be carried out to verify that the entered information matches the expected data. If this is the case, we will display on the screen a component that will contain all the received information. Otherwise, you must display an error message.

As a starting point, we will use the template we created in class 10 to get a head start on the work. If we don't have it, we can use the one found in the following initial repository.

About the delivery format

  • The work must be done individually.
  • The maximum delivery deadline will be the end of the class.
  • To submit the work, you must upload your code to a repository and complete the following form.

Guidelines and delivery requirements

  • The theme of the form can be any of our preference. We can request information about music, animals, books, cars, characters, or whatever we want.
  • The form must contain at least two text inputs and a submit button. If we wish, we can add more inputs to make our form more complete, but this is optional.
  • By clicking on the Submit button, we must perform the following validations:
    • For the first input, the minimum length of the entered text must be 3 characters and it must not contain any spaces at the beginning.
    • For the second input, we must validate that it contains at least 6 characters.
  • If any of the validations are incorrect, we must display the following error message: "Please check that the information is correct".
  • If the entered values pass the validations successfully, we must render the Card component containing that information. We can give it the style and/or shape we want, as long as it contains at least the same values entered in the form.

Solution