How can I attach to a stateless component's ref in React?

Question

I am looking to create a stateless component who\'s input element can be validated by the parent component.

In my example below, I am running into a pro

Answer 1

You can useuseRef hook which is available since v16.7.0-alpha.

EDIT: You're encouraged to use Hooks in production as of 16.8.0 release!

Hooks enable you to maintain state and handle side effects in functional components.

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

Read more in Hooks API documentation