this.innerRef = React.createRef(); code example

Example 1: react focus

const FocusDemo = () => {

    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            <button onClick={setInputFocus} >
               FOCUS
            </button>
            <input ref={inputRef} />
        </>
    )

}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

Example 2: refs react js

class Lesson9Refs extends Component {

    onAddProduct = () => {
        alert(this.refs.productname.value);
    }
    
    
    return (

            <div>

                <div className="container">
                    <div class="card mt-10">
                        <div class="card-header">
                            Featured
                        </div>
                        <div class="card-body">
                          
                            <label> Product Name: </label>
                            <input type='text' className="form-control" ref="productname" />  

                            <button type="submit" className="btn btn-primary" onClick={ this.onAddProduct } >
                                Add Product
                            </button>

                        </div>
                    </div>
                    <div className="row mt-10">
                        { elements }
                    </div>
                </div>
            </div>
        );

    }
}

export default Lesson9Refs;