title: React TS onClick select input value
body: <p>I have a task to create simple controlled components for an input with typescript. The target of this component stores the value in the state and also, when clicking on the input, the text was selected. I am starting to work with typescript for the first time and do not know how to correctly implement the function for selecting text on click.</p>
  <pre><code>interface InputChangeInterface {
    target: HTMLInputElement;
  }
  
  type FieldProps = {
    type: string;
  };
  
  const TextField = ({ type }: FieldProps) =&gt; {
    const [state, setState] = useState('');
  
    const handleOnChange = (event: InputChangeInterface) =&gt; {
      setState(event.target.value);
    };
  
    const handleSelect = (event: React.MouseEvent&lt;HTMLElement&gt;) =&gt; {
      // console.log(event.target);
    };
  
    return (
      &lt;div className=&quot;input-group mb-3&quot;&gt;
        &lt;input
          type={type}
          value={state}
          className=&quot;form-control&quot;
          onChange={handleOnChange}
          onClick={handleSelect}
        /&gt;
        {state}
      &lt;/div&gt;
    );
  };
  </code></pre>