ExemploGrupoReactFb

App.jsx

import React, { useState, useRef } from "react";

export default () => {
  const [state, setState] = useState({
    animate: false,
    inputValue: "",
    inputActive: false
  });

  const inputRef = useRef(null);

  const onClickBtn = () => {
    setState((prevState) => ({
      ...prevState,
      inputActive: true,
      animate: !prevState.animate,
      inputValue: ""
    }));
    inputRef.current.focus();
  };
  return (
    <div>
      <button onClick={onClickBtn}>Click</button>
      <input
        onChange={({ target }) =>
          setState((prevState) => ({ ...prevState, inputValue: target.value }))
        }
        value={state.inputValue}
        className={`${state.inputActive ? "active" : ""} ${
          state.animate ? "animate" : ""
        }`}
        ref={inputRef}
        placeholder="input"
      />
    </div>
  );
};