Unable to print multiple form input Data in React

Asked
Active3 hr before
Viewed126 times

9 Answers

printunablereactmultiple
90%

I am new to React and trying to print values of the Input on submit button. I declared an empty state and stored the input value in it. When trying to show a single input data, I am not getting any error. Now, I was trying to store it in an array and display via a Results component through Map method. ,Connect and share knowledge within a single location that is structured and easy to search., What has the US and NATO done in Afghanistan for 20+ years?

Pretag
 Pretag team - issue, fix, solve, resolve
88%

The most basic way of working with forms in React is to use what are referred to as “uncontrolled” form inputs. What this means is that React doesn’t track the input’s state. HTML input elements naturally keep track of their own state as part of the DOM, and so when the form is submitted we have to read the values from the DOM elements themselves.,instant input validation: we can give the user instant feedback without having to wait for them to submit the form (e.g. if their password is not complex enough),In order to associate the ref with an input, it’s passed to the element as the special ref attribute. Once this is done, the input’s underlying DOM node can be accessed via this.nameEl.current.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

One frequently used form control is textarea, which is used to get multi-line input from a user. It's different from a normal text input, which allows only single-line input. A good example of a use case for textarea is an address field.,Notice that textarea is used as a type with the input form control, and as soon as the user changes the value, it's used for the rendering process.,<textarea> is the official tag in HTML5 to define a multi-line text input control.

1import React, { Component } from "react";
2
3class Simpletextarea extends Component {
4  constructor() {
5    super();
6    this.state = {
7      name: "React"
8    };
9  }
10
11  handleChange(event) {
12    console.log(event.target.value)
13  }
14
15  render() {
16    return (
17      <div>
18        <label>Enter value : </label>
19        <input type="textarea" 
20          name="textValue"
21          onChange={this.handleChange}
22        />
23      </div>
24    );
25  }
26}
27
28export default Simpletextarea;
load more v
65%

In this article, I will tell you how to handle multiple form inputs in a simple and easy method. Whenever we creating a form then we have to handle multiple inputs and its value for manipulating data according to the requirement. So, then we have to know that how to handle the multiple inputs.,The first step we have to create a login component then we have to create two inputs that are email and password. So, lets created it :,You can see that it is much better, for using multiple input form fields in future. So keep this point in your mind for making your component more generalized.

Now, let’s return to our login example. You may notice something the key names of our state object in a login component that is:-

state = {
      email: '', // key name is (email)    password: ''  key name is (password)}
load more v
75%

The connect method from react-redux returns a functional component that cannot be assigned a reference to be used within the content props' callback in react-to-print. To use a component wrapped in connect within content create an intermediate class component that simply renders your component wrapped in connect. See 280 for more., The connect method from react-redux returns a functional component that cannot be assigned a reference to be used within the content props' callback in react-to-print. To use a component wrapped in connect within content create an intermediate class component that simply renders your component wrapped in connect. See 280 for more. ,PS: This style tag should be inside the component that is being passed in as the content ref.

export class ComponentToPrint extends React.PureComponent {
  render() {
    return (
      <table>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
    );
  }
}
load more v
40%

PS: This style tag should be inside the component that is being passed in as the content ref.,This will hide ComponentToPrint but keep it in the DOM so that it can be copied for printing.,In the component that is passed in as the content ref, add the following:

export class ComponentToPrint extends React.PureComponent {
  render() {
    return (
      <table>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
    );
  }
}
load more v
22%

I recently had to refactor a React Form when working with multiple inputs and I thought I'd share how I did it. ,Thank you so much, I was handling this terrible, but with your handleChange I was able to refactor the entire event! fav*,This Form component has 5 input fields in total; 5 different states and 5 different onChange inline functions

import React, { useState } from "react";

export default function Form() {
  const [newCompany, setCompany] = useState("");
  const [newPosition, setPosition] = useState("");
  const [newLink, setNewLink] = useState("");
  const [newDate, setNewDate] = useState("");
  const [newNote, setNewNote] = useState("");

  return (
        <form>
          <input
            value={newCompany}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          />
          <input
            value={newPosition}
            onChange={(e) => setPosition(e.target.value)}
            label="Job Title"
          />
          <input
            value={newLink}
            onChange={(e) => setNewLink(e.target.value)}
            label="Job Link"
          />
          <input
            type="date"
            value={newDate}
            onChange={(e) => setNewDate(e.target.value)}
          />
          <input
            value={newNote}
            onChange={(e) => setNewNote(e.target.value)}
            label="Note"
          />
          <button type="submit"> Submit </button>
        </form>
  );
}
load more v
60%

The component instance corresponding to this test instance. It is only available for class components, as function components don’t have instances. It matches the this value inside the given component.,Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don’t have instances.,The component type corresponding to this test instance. For example, a <Button /> component has a type of Button.

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm
load more v
48%

Following the above pattern, you should be able to build a wizard form/funnel to collect user input data from multiple pages.,This idea here is that you can easily compose your form with inputs. We are going to create a Form component to automatically collect form data.,Step 2: Create your pages, collect and submit the data to the store and push to the next form/page.

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name</label>
      <input id="name" {...register('name', { required: true, maxLength: 30 })} />
      {errors.name && errors.name.type === "required" && <span>This is required</span>}
      {errors.name && errors.name.type === "maxLength" && <span>Max length exceeded</span> }
      <input type="submit" />
    </form>
  );
}
load more v

Other "print-unable" queries related to "Unable to print multiple form input Data in React"