I'm building a React website with [fluentui/react-nothstar](https://www.npmjs.com/package/@fluentui/react-northstar) package controls. Below you can find a simplified example of Text + Button. My scenario is to access the text control when the button is pressed. I need something like document.findElementById which works via [refs in React](https://reactjs.org/docs/refs-and-the-dom.html). It works great for component controls (that extends React.Component) but fails for Northstar components with the error:

`Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?`

Based on the warning details and the Text control definition, it looks like it's a function component and I have to use [React forwardRef](https://reactjs.org/docs/forwarding-refs.html) to access its properties. I tried multiple ways to do this [here](https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele), [here](https://stackoverflow.com/questions/56484686/how-do-i-avoid-function-components-cannot-be-given-refs-when-using-react-route), and [here](https://github.com/reactjs/reactjs.org/issues/2120) but wasn't successful.

```
import React from 'react';
import {
    Text,
    Button,
}
    from '@fluentui/react-northstar';

class Welcome extends React.Component {

    private textRef: any = React.createRef();

    private doJob1() {
        console.log("doJob1 executed");
        console.log(this.textRef.current); // returns null
    }

    render() {
        return (
            <div>
                <div>Welcome</div>
                <div>
                    <Text
                        ref={this.textRef}
                        content="My fancy text control" />
                    <Button
                        onClick={this.doJob1.bind(this)}
                        content="My fancy button" />

                </div>
            </div>
        );
    }
}

export default Welcome;

```

In most cases, I can avoid direct element access by use props and state but in some cases, I still need a component reference (change focus, open dialog, update values not defined in my state).

What is the right way to access the Text control in the Button click handler in the example above?