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;

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}

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

1import React, { useState } from "react";
2import Checkbox from "@material-ui/core/Checkbox";
3import Button from "@material-ui/core/Button";
4import TextField from "@material-ui/core/TextField";
5import FormControlLabel from "@material-ui/core/FormControlLabel";
6import Typography from "@material-ui/core/Typography";
7import { makeStyles } from "@material-ui/core/styles";
8import Container from "@material-ui/core/Container";
9import { useForm } from "react-hook-form";
10import Rating from "@material-ui/lab/Rating";
11import StarBorderIcon from '@material-ui/icons/StarBorder';
12
13const useStyles = makeStyles((theme) => ({
14  paper: {
15    marginTop: theme.spacing(8),
16    display: "flex",
17    flexDirection: "column",
18    alignItems: "center"
19  },
20  form: {
21    width: "100%", // Fix IE 11 issue.
22    marginTop: theme.spacing(1)
23  },
24  submit: {
25    margin: theme.spacing(3, 0, 2)
26  }
27}));
28
29export default function Create() {
30  const classes = useStyles();
31  const [rating, setRating] = useState(2);
32  const { register, handleSubmit } = useForm();
33  const onSubmit = (data) => {
34    console.log(data);
35  };
36
37  return (
38    <Container component="main" maxWidth="xs">
39      <div className={classes.paper}>
40        <Typography component="h1" variant="h5">
41          Form
42        </Typography>
43        <form
44          className={classes.form}
45          noValidate
46          onSubmit={handleSubmit(onSubmit)}
47        >
48          <TextField
49            variant="outlined"
50            margin="normal"
51            fullWidth
52            id="title"
53            label="Title"
54            name="title"
55            autoFocus
56            inputRef={register()}
57          />
58          <FormControlLabel
59            control={
60              <Checkbox
61                inputRef={register}
62                name="remember"
63                defaultValue={false}
64              />
65            }
66            label="remember"
67          />
68          <br />
69          <FormControlLabel
70            control={
71              <>
72                <input
73                  name="rating"
74                  type="number"
75                  value={rating}
76                  ref={register}
77                  hidden
78                  readOnly
79                />
80                <Rating
81                  name="rating"
82                  value={rating}
83                  precision={0.5}
84                  onChange={(_, value) => {
85                    setRating(value);
86                  }}
87                  icon={<StarBorderIcon fontSize="inherit" />}
88                />
89              </>
90            }
91            label="select rating"
92          />
93          <Button
94            type="submit"
95            fullWidth
96            variant="contained"
97            color="primary"
98            className={classes.submit}
99          >
100            Submit
101          </Button>
102        </form>
103      </div>
104    </Container>
105  );
106}
107

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>