title: react typescript create ref to access state of child
body: <p>I want to access the state of child component in the parent component, I don't want to use any handlers in child component that can set a variable in parent or I don't want to lift the state up in parent. How can I use ref in react typescript to createRef and get the child's state in the parent component?</p>
  <p>Parent:</p>
  <pre><code>export interface ParentProps {}
  
  interface State {
      counter?: number
  }
  
  export class Parent extends React.Component&lt;ParentProps, State&gt; {
      private readonly childRef: React.RefObject&lt;**what should I put here?**&gt;
      constructor(props: ParentProps) {
          super(props)
          this.state = {
              counter: undefined
          }
          this.childRef = React.createRef&lt;**what should I put here**&gt;();
      }
  
      render(){
          &lt;Child ref={childRef} **&lt;- (this throws an error)** counter={this.state.counter}
          &lt;button onClick={() =&gt; this.setState({counter: this.state.counter + 1})}&gt;
               add
          &lt;/button&gt;
      }
  }
  </code></pre>
  <p>Child:</p>
  <pre><code>export interface ChildProps {
    counter: number
  }
      
  interface State {
    some state variable that should be accessible in parent
  }
      
  export class Child extends React.Component&lt;ChildProps, State&gt; {
     some methods...
  }
  </code></pre>