How to use "ref" to refer an element in React Stateless Component - reactjs

Question

I was trying to implement focus for the Submit button with Ref. I wanted to omit refering elements by ID.
import React, { useRef } from 'react'
import PropTypes from 'prop-types'
export const LabelComponent = () => {
const createButton = enableCreateButton()
? <button ref={(input) => { this.createLabelBtn = input }} >Submit</button>
: <button disabled ref={(input) => { this.createLabelBtn = input }} >Submit</button>
const createLabelBtn = useRef();
const focusCreateBtn = (e) => {
if ((e.key === 'Enter') && (newLabel.name !== '')) {
this.createLabelBtn.focus();
}
};
return (
<div className='create-label-container'>
<input type='text'
onKeyDown={(e) => { focusCreateBtn(e) }}
/>
{createButton}
</div>
)
}
It gives following error.
Uncaught TypeError: Cannot set property 'createLabelBtn' of undefined
Uncaught TypeError: Cannot set property 'createLabelBtn' of undefined
What could be the issue here.?

Answer 1

Functional components are instanceless, therefore, no this to bind anything to or call upon. Set the ref prop on the button as so ref={createLabelBtn}, and to set the focus you need to access createLabelBtn.current to get at the current value of the ref.
export const LabelComponent = ({ enableCreateButton }) => {
const createLabelBtn = useRef(null);
const focusCreateBtn = e => {
if (e.key === "Enter") {
createLabelBtn.current.focus();
}
};
return (
<div className="create-label-container">
<input type="text" onKeyDown={focusCreateBtn} />
<button
// upon being focused upon, console log proof
onFocus={() => console.log("Submit Focused!")}
disabled={!enableCreateButton}
ref={createLabelBtn}
>
Submit
</button>
</div>
);
};

Answer 2

Try this
import React, { useRef, useState } from "react";
const LabelComponent = () => {
const [name, setName] = useState("");
const createButton = true ? (
<button
ref={input => {
createLabelBtn.current = input;
}}
>
Submit
</button>
) : (
<button
disabled
ref={input => {
createLabelBtn.current = input;
}}
>
Submit
</button>
);
const createLabelBtn = useRef();
const focusCreateBtn = e => {
if (e.key === "Enter" && name !== "") {
createLabelBtn.current.focus();
}
};
return (
<div className="create-label-container">
<input
type="text"`enter code here`
value={name}
onChange={e => {
setName(e.target.value);
}}
onKeyDown={e => {
focusCreateBtn(e);
}}
/>
{createButton}
</div>
);
};
export default LabelComponent;