from controlled form into hook

Question

Hello this is my first question here and I am just a beginner in Reactjs I need your explanation, please

the code is about Controlled Form wrote in-class component using "this.state".

I was trying time to turn it into a functional component using hooks with the same results 1- onSubmit render text on the screen 2- reset input into ""

the problem is no results going write and instead I got [object, Object] in the search

this is code

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input,
      input:''
    })
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
        <input type='text' 
          value={this.state.input} 
          onChange={this.handleChange}
          />
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
}

The code at codesandbox for fast access please can you tell me how to solve it? thank you

Answer 1

Here is what you need https://codesandbox.io/s/new-leftpad-1n0yy, you can compare your current MyForm with Form to understand the difference, but I suggest to check documentation deeper

Answer 2

Here is the answer by Artem Matiushenko he added the second component using useState, useCallback

now we can compare the two types for controlled form

import React, { useCallback, useState } from "react";
import "./styles.css";

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      submit: "",
    };
  }
  handleChange = (event) => {
    this.setState({
      input: event.target.value,
    });
  };
  handleSubmit = (event) => {
    event.preventDefault();
    this.setState({
      submit: this.state.input,
      input: "",
    });
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.input}
            onChange={this.handleChange}
          />
          <button type="submit">Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
}
//using hooks------->
function Form() {
  const [value, setValue] = useState("");
  const [submitedValue, setSubmitedValue] = useState();

  const handleOnChange = useCallback(({ target }) => {
    setValue(target.value);
  }, []);

  const handleOnSubmit = useCallback(
    (event) => {
      event.preventDefault();
      setSubmitedValue(value);
      setValue("");
    },
    [value]
  );

  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <input type="text" value={value} onChange={handleOnChange} />
        <button type="submit">Submit!</button>
      </form>
      <h1>{submitedValue}</h1>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Class Component Form</h1>
      <h2>controlled form</h2>
      <MyForm />
      <Form />
    </div>
  );
}

here is mine after I understood how useSate works

const MyForm = () => {
  const [input, setInput] = useState("");
  const [submitText, setSubmitText] = useState("");

  const handleChange = (event) => {setInput(event.target.value)};

  const handleSubmit = (event) => {
    event.preventDefault();
    setSubmitText(input);
    setInput("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={input} onChange={handleChange} />
        <button type="submit">Submit!</button>
      </form>
      <h1>{submitText}</h1>
    </div>
  );
};