How do I convert my class and render() to a functional component using react hooks?

Question

I'm trying to convert my class to a functional component but I'm having trouble with the isInputActive. This is what the class looks like:

BEFORE

class HelloWorld extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isInputActive: false,
        };
      }

render() {
    const focusHandler = () => {
      onChange('');
      this.setState({
        isInputActive: true,
      });
    };

And in my return(), I've got this:

<input
  onBlur={() => {
  this.setState({ isInputActive: false });
  }}
 />

So, I tried converting it as seen below:

I converted the class to a const:

AFTER

const HelloWorld = ({ isInputActive }) => {
  const [isInputActive, setIsInputActive] = useState(false);

Then my render() was converted as seen here:

const focusHandler = () => {
    onChange('');
    setIsInputActive(true);
  };

And finally, I assumed that my <input> in the return() would look like this (the setState became useState which I'm not sure if it's correct either):

onBlur={() => {
 useState({ isInputActive: false });
  }}

Does anyone know what it should look like? to make it work without erroring? Where I've done const PinInput = ({ isInputActive }) => { I get an error: Parsing error: Identifier 'isInputActive' has already been declared

My code might be wrong so you can ignore the AFTER if you want. I'm just trying to make sure I get rid of the render().

Answer 1

Change,

onBlur={() => {
 useState({ isInputActive: false });
}}

To,

onBlur={() => {
 setIsInputActive(false);
}}

Reason you are getting this error, Parsing error: Identifier 'isInputActive' has already been declared is because, You are already declaring the variable isInputActive here,

const [isInputActive, setIsInputActive] = useState(true);

And it already hold the value of true.

To make it false just do setIsInputActive(false) ..