react forms

1import React from "react";
2import { useForm, Controller } from "react-hook-form";
3import Select from "react-select";
4import Input from "@material-ui/core/Input";
5import { Input as InputField } from "antd";
6
7export default function App() {
8  const { control, handleSubmit } = useForm();
9  const onSubmit = data => console.log(data);
10
11  return (
12    <form onSubmit={handleSubmit(onSubmit)}>
13      <Controller as={Input} name="HelloWorld" control={control} defaultValue="" />
14      <Controller as={InputField} name="AntdInput" control={control} defaultValue="" />
15      <Controller
16        as={Select}
17        name="reactSelect"
18        control={control}
19        onChange={([selected]) => {
20          // React Select return object instead of value for selection
21          return { value: selected };
22        }}
23        defaultValue={{}}
24      />
25
26      <input type="submit" />
27    </form>
28  );
29}
30

1import React, { useState } from "react";
2import "./styles.css";
3function Form() {
4  const [firstName, setFirstName] = useState("");
5  const [lastName, setLastName] = useState("");
6  const [email, setEmail] = useState("");
7  const [password, setPassword] = useState("");
8  return (
9    <form>
10      <input
11        value={firstName}
12        onChange={e => setFirstName(e.target.value)}
13        placeholder="First name"
14        type="text"
15        name="firstName"
16        required
17      />
18      <input
19        value={lastName}
20        onChange={e => setLastName(e.target.value)}
21        placeholder="Last name"
22        type="text"
23        name="lastName"
24        required
25      />
26      <input
27        value={email}
28        onChange={e => setEmail(e.target.value)}
29        placeholder="Email address"
30        type="email"
31        name="email"
32        required
33      />
34      <input
35        value={password}
36        onChange={e => setPassword(e.target.value)}
37        placeholder="Password"
38        type="password"
39        name="password"
40        required
41      />
42      <button type="submit">Submit</button>
43    </form>
44  );
45}
46export default Form;

1// perfect form
2import React, { useState } from "react";
3import axios from "axios";
4import { toastError, toastSuccess } from "./Toast";
5import { useHistory } from "react-router-dom";
6
7export function FetchAPI() {
8  const history = useHistory();
9
10  const [user, setUser] = useState({
11    firstName: "",
12    lastName: "",
13    email: "",
14    password: "",
15  });
16
17  const onInputChange = async (e) => {
18    setUser({ ...user, [e.target.name]: e.target.value });
19  };
20  const { firstName, lastName, email, password } = user;
21
22  const handleSubmit = async (e) => {
23    e.preventDefault();
24    axios
25      .post(`http://localhost:4000/user`, user)
26      .then((res) => {
27        console.log("~ res", res)
28        toastSuccess("User successfully registered");
29      })
30      .catch((error) => {
31        console.log(error);
32        toastError("Useris not created try again");
33      });
34    history.push("/displayUser");
35    console.log("Out side handle");
36  };
37  return (
38    <form onSubmit={(e) => handleSubmit(e)}>
39      <center>
40        <div style={{ marginTop: "40px" }}>
41          <label>
42            First Name:
43            <input
44              type="text"
45              value={firstName}
46              name="firstName"
47              onChange={(e) => onInputChange(e)}
48              required
49            />
50          </label>
51          <br />
52          <label>
53            last Name:
54            <input
55              type="text"
56              value={lastName}
57              name="lastName"
58              onChange={(e) => onInputChange(e)}
59            />
60          </label>
61          <br />
62          <label>
63            email:
64            <input
65              type="email"
66              value={email}
67              name="email"
68              onChange={(e) => onInputChange(e)}
69              required
70            />
71          </label>
72          <br />
73          <label>
74            password:
75            <input
76              type="text"
77              value={password}
78              name="password"
79              onChange={(e) => onInputChange(e)}
80              required
81            />
82          </label>
83          <br />
84          <br />
85          <button>Submit </button>
86        </div>
87      </center>
88    </form>
89  );
90}
91export default FetchAPI;
92

1class NameForm extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {value: ''};
5    this.handleChange = this.handleChange.bind(this);
6    this.handleSubmit = this.handleSubmit.bind(this);
7  }
8
9  handleChange(event) {    this.setState({value: event.target.value});  }
10  handleSubmit(event) {
11    alert('A name was submitted: ' + this.state.value);
12    event.preventDefault();
13  }
14
15  render() {
16    return (
17      <form onSubmit={this.handleSubmit}>
18        <label>
19          Name:
20          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
21        <input type="submit" value="Submit" />
22      </form>
23    );
24  }
25}

1class FlavorForm extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {value: 'coconut'};
5    this.handleChange = this.handleChange.bind(this);
6    this.handleSubmit = this.handleSubmit.bind(this);
7  }
8
9  handleChange(event) {    this.setState({value: event.target.value});  }
10  handleSubmit(event) {
11    alert('Your favorite flavor is: ' + this.state.value);
12    event.preventDefault();
13  }
14
15  render() {
16    return (
17      <form onSubmit={this.handleSubmit}>
18        <label>
19          Pick your favorite flavor:
20          <select value={this.state.value} onChange={this.handleChange}>            <option value="grapefruit">Grapefruit</option>
21            <option value="lime">Lime</option>
22            <option value="coconut">Coconut</option>
23            <option value="mango">Mango</option>
24          </select>
25        </label>
26        <input type="submit" value="Submit" />
27      </form>
28    );
29  }
30}

1<form>
2  <label>
3    Nome:
4    <input type="text" name="name" />
5  </label>
6  <input type="submit" value="Enviar" />
7</form>