Convert Uncontrolled Components from : Class extends to Functional Components?

Question

I'm getting trouble in converting the Uncontrolled Components from class Components into Functional Componnents...

Class Components:

import React from 'react';

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    console.log('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
export default NameForm;

I want to convert into functional component. SOmething like this:

import React,{useState,useEffect} from 'react';

function App() {

const[inputText,setinputText] = useState();
//Rest of codes here::

return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
}
export default App;

I really don't know about converting the constructor.. Any one please help me on this.

You dont have `state` in class component, do you need it? – Konstantin Modin Jul 28 '21 at 17:14 — Konstantin Modin, Jul 28 '21 at 17:14

score 2 · Answer 1 · answered Jul 28 '21 at 17:13

Can be done like this:

import React from "react";

const NameForm = () => {
  const inputRef = React.useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("A name was submitted: " + inputRef.current.value);        
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
};

export default NameForm;

Convert Uncontrolled Components from : Class extends to Functional Components?

1 Answers1