Introduction to Forms in React

In React, a form is a component that contains form elements. These can include input fields, buttons, and other interactive elements. Forms can be used to collect data from users, validate input, and send data to a server.

The basic structure of a form in React looks like this:

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({});

  function handleChange(event) {
    // update formData with the new value
  }

  function handleSubmit(event) {
    event.preventDefault();
    // send formData to a server or do something else with it
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, we use the useState hook to store the form data in the state. We also define handleChange and handleSubmit functions to handle updates to the form data and form submission, respectively.

Handling Form Input with State

In the example above, we used the useState hook to store the form data in the state. This is a convenient way to keep track of the values of form elements as the user inputs them.

To bind a form element to a state, we can use the onChange event. This event is triggered whenever the value of an input field changes.

Here's an example of how to use onChange to update the state:

function handleChange(event) {
  setFormData({
    ...formData,
    [event.target.name]: event.target.value
  });
}

In this code, we use the spread operator (...) to create a new object that contains all the properties of formData, and then we use the computed property name syntax ([event.target.name]) to add a new property to the object with the name of the input field and the value of the input field as the value.

Validating Form Input

Input validation is an important part of any form. It helps ensure that the data entered by the user is in the correct format and meets certain requirements.

There are several ways to validate form input in React:

• HTML validation: Many form elements, such as input and textarea, have built-in validation attributes that can be used to ensure that the data entered by the user meets certain criteria. For example, the required an attribute can be used to require that a field is filled out, and the pattern an attribute can be used to specify a regular expression that the input must match.

• Third-party libraries: There are many libraries available that provide additional validation functionality beyond what is available with HTML. Some popular options include Formik, Yup, and React-Validation.

• Custom validation: It is also possible

This is a sample pug template and for data, you can pass it when compiling, and to compile it and render you can make a route in express backend and return the response as "res.render("view",{data});"

Note: Remember to put this pug file in views and in the root file of your server you have declared the templating engine.

Now to get the view you can go to the express endpoint route you've declared and see if the view is perfect or not. and to test it in a robust environment you can also install the pug-cli compiler and watch the file while testing and designing this was a major feature I had. I simply used the following command. "pug - obj views/data.json views/index.pug -w" while the flags described are (double dash ) - obj for the data that needs to be passed along. and second, being -w as in watch for changes.

Now as we have our template complete and we can move to the front end and in it, I used a library called react-to-print and react-iframe to render the pug view.

for implementation, I used a form for data to send to the backend and process the view, and when I received the response than frontend open up a modal with two elements in it 1. button to trigger print and 2. the iframe with the URL of the view preview previously made in express to render the view. (you can have this view dynamic by receiving some IDs from the backend when you submit your form data). mine looks like this

and for button onclick you can call the hook mentioned in the image and pass on the data required(see docs what can you pass and how can you manipulate). and if everything works fine then viola! you will get a prompt to the print dialog.