createRef as prop to createElement - reactjs

Question

I'm new to React and its processes. How would I add a ref to an element as a prop? So far I am getting null for ref, and undefined for wordRef.
render(){
const {
str = "Functional components cannot leverage on the performance improvements and render optimizations that come with React.",
func = function(){
const words = str.split(" ");
const els = words.map( word => {
const ref = React.createRef();
console.log('ref',ref.current); // null
return React.createElement( "wrd", {attr:"ref-"+ref}, word+" ");
});
return els;
},
wordRef = React.createRef()
} = this.props;

Answer 1

You have some ways in order to create a ref. This is one:
Class components:
class AutoFocusTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
return (
<input
type="text"
ref={this.textInput} />
);
}
}
If you want to pass this ref as prop, you need to create the child component as class.
Function Components:
function CustomTextInput(props) {
// textInput must be declared here so the ref can refer to it
let textInput = React.createRef();
function handleClick() {
textInput.current.focus();
}
return (
<div>
<input
type="text"
ref={textInput} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
Documentation is useful and you can see how to create a ref properly: https://reactjs.org/docs/refs-and-the-dom.html https://reactjs.org/docs/forwarding-refs.html
However, take care using ref: "Avoid using refs for anything that can be done declaratively."