ag-Grid: Framework component is missing the method getValue()

Question

I have this columnDefinition:

headerName: "Date of birth",
field: "geburtsdatum",
editable:true,
cellEditorFramework: ChildGeburtstagEditor,
onCellValueChanged: (params: any) => {
    console.log("New param" + params.newValue); //This value is every time null
},
resizable: true,

ChildGeburtstagEditor:

import React, {useState} from 'react';
...

interface State {
    value: string;
}

interface Props {
    value: any;
    getValue: any; //Tried to set getValue here
}

const ChildGeburtstagRenderer: React.FC<Props> = (props) => {
    const [state, setState] = useState<State>({
        value: "2019-08-08",
    });

    function getValue(): string { //THIS FUNCTION CANT BE FOUND?!?!?
        return "Test";
    }

    return (
        <>
            ... some code...
        </>
    );
}

//EDIT: IF I add this line here I get ChildGeburtstagRenderer undefined
ChildGeburtstagRenderer.prototype.getValue = () => "Text";
    export default ChildGeburtstagRenderer;

Every time when I leave the editor (Click away) the return value is every time null and I get the ag-grid message:

"ag-Grid: Framework component is missing the method getValue()"

How can I tell ag-grid that I have the function getValue in the code?

//Solution I am using a functional component with typescript. This is working for me

interface State {
    value: string;
}

interface Props {
    value: any;
}

const ChildGeburtstagEditor: React.FC<Props> = (props, ref) => {
    const [state, setState] = useState<State>({
        value: props.value,
    });

    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return state.value;
            }
        };
    });

    return (
        <>
            <TextField
                id="standard-name"
                label="Name"
                className={classes.textField}
                value={state.value}
                onChange={(evt) => {setState({...state, value: evt.target.value})}}
                margin="normal"
              />
        </>
    );
};
export default forwardRef(ChildGeburtstagEditor);

Answer 1

The next version of ag-Grid (and ag-grid-react) will have full support & documentation for using hooks within ag-Grid, but for now all you need to know is that you need to wrap your hook with forwardRef and expose expected lifecycle methods (like getValue) with an useImperativeHandle.

export default forwardRef((props, ref) => {
    const inputRef = useRef();
    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return inputRef.current.value;
            }
        };
    });
    return <input type="text" ref={inputRef} defaultValue={props.value}/>;
})

This will work fine for Cell Renderers and Cell Editors, but support for Filters etc will only be available in the next version (22.0.0).