Answers for "react forms"

react-hook-form material-ui

import React from "react";
import { useForm, Controller } from "react-hook-form";
import Select from "react-select";
import Input from "@material-ui/core/Input";
import { Input as InputField } from "antd";

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller as={Input} name="HelloWorld" control={control} defaultValue="" />
      <Controller as={InputField} name="AntdInput" control={control} defaultValue="" />
      <Controller
        as={Select}
        name="reactSelect"
        control={control}
        onChange={([selected]) => {
          // React Select return object instead of value for selection
          return { value: selected };
        }}
        defaultValue={{}}
      />

      <input type="submit" />
    </form>
  );
}

form in react

import React, { useState } from "react";
import "./styles.css";
function Form() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <form>
      <input
        value={firstName}
        onChange={e => setFirstName(e.target.value)}
        placeholder="First name"
        type="text"
        name="firstName"
        required
      />
      <input
        value={lastName}
        onChange={e => setLastName(e.target.value)}
        placeholder="Last name"
        type="text"
        name="lastName"
        required
      />
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="Email address"
        type="email"
        name="email"
        required
      />
      <input
        value={password}
        onChange={e => setPassword(e.target.value)}
        placeholder="Password"
        type="password"
        name="password"
        required
      />
      <button type="submit">Submit</button>
    </form>
  );
}
export default Form;

form react

// perfect form
import React, { useState } from "react";
import axios from "axios";
import { toastError, toastSuccess } from "./Toast";
import { useHistory } from "react-router-dom";

export function FetchAPI() {
  const history = useHistory();

  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
  });

  const onInputChange = async (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };
  const { firstName, lastName, email, password } = user;

  const handleSubmit = async (e) => {
    e.preventDefault();
    axios
      .post(`http://localhost:4000/user`, user)
      .then((res) => {
        console.log("~ res", res)
        toastSuccess("User successfully registered");
      })
      .catch((error) => {
        console.log(error);
        toastError("Useris not created try again");
      });
    history.push("/displayUser");
    console.log("Out side handle");
  };
  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      <center>
        <div style={{ marginTop: "40px" }}>
          <label>
            First Name:
            <input
              type="text"
              value={firstName}
              name="firstName"
              onChange={(e) => onInputChange(e)}
              required
            />
          </label>
          <br />
          <label>
            last Name:
            <input
              type="text"
              value={lastName}
              name="lastName"
              onChange={(e) => onInputChange(e)}
            />
          </label>
          <br />
          <label>
            email:
            <input
              type="email"
              value={email}
              name="email"
              onChange={(e) => onInputChange(e)}
              required
            />
          </label>
          <br />
          <label>
            password:
            <input
              type="text"
              value={password}
              name="password"
              onChange={(e) => onInputChange(e)}
              required
            />
          </label>
          <br />
          <br />
          <button>Submit </button>
        </div>
      </center>
    </form>
  );
}
export default FetchAPI;

react forms

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

html select react

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

form react

<form>
  <label>
    Nome:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Enviar" />
</form>