Ref hook in react

UseRef

/*
	A common use case is to access a child imperatively: 
*/

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Source: reactjs.org

Ref hook in react

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Source: reactjs.org

Similar codes

63 votes154 views3 answers
Concat two arrays in react
Javascript React
7 votes136 views2 answers
Insert a line break into a text component in react-native
Javascript React
0 vote152 views1 answer
React Hook useEffect has missing dependencies: 'cart' and 'user._id'. Either include them or remove the dependency array react-hooks/exhaustive-deps
Javascript React
10 votes159 views3 answers
Jquery react npm
Javascript React
0 vote171 views1 answer
No routes matched location / react router
Javascript React
1 vote130 views1 answer
How to pass function as a props in react in functional components
Javascript React
1 vote157 views1 answer
React vscode stop auto close tag
Javascript React
0 vote526 views1 answer
How to embed an expression in react js
Javascript React
8 votes141 views1 answer
Ternary operator in button react
Javascript React
-1 vote103 views1 answer
Array.filter react
Javascript React