focus on input text in conditional rendering react component - reactjs

Question

I have Conditional Rendering component in reactJs. i use latest react version, and use MaterialUi in my application. this component use to show a span with a text and as soon as user click on it, it change to a input with a component of MaterialUi and user can change the field by this component
import React from 'react';
import EditIcon from '#material-ui/icons/Edit';
import TextField from '#material-ui/core/TextField';
import { grey400 } from 'material-ui/styles/colors';
class InlineEditInput extends React.Component {
constructor(props) {
super(props);
this.state = {
hover: false,
edit: false,
value: this.props.children
};
this.textInput = React.createRef();
}
handleClick = event => {
event.stopPropagation();
if (!this.state.edit) {
this.setState({ value: this.props.children });
this.setState({ edit: true, hover: false });
}
};
handleBlur = () => {
this.setState({ edit: false });
if (this.state.value.length > 0 && this.state.value !== this.props.children) this.props.onChange(this.state.value);
else this.setState({ value: this.props.children });
};
handleMouseEnter = () => this.setState({ hover: true });
handleMouseLeave = () => this.setState({ hover: false });
render() {
let { hover, edit, value } = this.state;
const originalValue = this.props.children;
const styles = {
label: { minHeight: '2em', marginTop: '10px' },
editIcon: { width: 20, height: 20, fill: grey400, marginLeft: 8 },
editIconHidden: { width: 20, height: 20, fill: 'none', marginLeft: 8 }
};
const setFocus = () => {
this.textInput.focus();
};
if (!edit)
return (
<div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<span onClick={this.handleClick}>{originalValue}</span>
{hover ? <EditIcon style={styles.editIcon} /> : <EditIcon style={styles.editIconHidden} />}
</div>
);
else
return (
<TextField
id="EditField"
ref={input => {
this.textInput = input;
setFocus();
}}
value={value}
onClick={this.handleClick}
onBlur={this.handleBlur}
onChange={event => this.setState({ value:event.target.value })}
/>
);
}
}
export default InlineEditInput;
At first an span with value of originalvalue that comes get from its props of this component, is rendered and by click on this, edit state changed to ture and a TextField component of MaterialUi is rendered and I want to focus on this TextFieldAs soon as it is rendered.
For this purpose, I render a TextField and define its ref property that pass input to a function with name of setFocus and in this function I write focus method.
But when I click on span and re-render of component is occurred, i faced with the error that said :
this2.textInput.focus is not a function
how can i write this component?

Answer 1

Try using componentDidUpdate life cycle hook
componentDidUpdate(prevProps, prevState, snapshot) {
if(this.state.edit)
this.textInput.focus();
}
The reason your method is not getting the input to be focused might be due to the fact that the DOM is not yet inserted when you are actually creating the ref. More like the textInput element is created but it's not appended to the DOM. Just a hunch, not 100% sure.