React : State and props on the same parameter - reactjs

Question

I'm a junior developer.
I use Textfield of material ui, but i have a problem. I get the value by a property, and it works ! however i can't edit the textfield, so i would want to use the onChange parameter, this is my code :
<TextField ref="docLibelle" value={this.props.lastuploadfile.content} onChange={this._handleTextFieldChange}
And my function :
_handleTextFieldChange = (e:any) => {
this.setState({
showReferenceIsRequired : false,
libelDoc: e.target.value
});
}
And I try that :
<TextField ref="docLibelle" value={this.state.libelDoc&& this.props.lastuploadfile.content} onChange={this._handleTextFieldChange}
But it doesn't work .. How can i get the value by the property and edit also the textfield ?
Thank you for yours answers !

Answer 1

I think the solution is pretty simple. Since you want to be able to change the textField value and also initialize it with a value you can just setState with props in your componentDidMount method
componentDidMount(){
this.setState({libelDoc: this.props.lastuploadfile.content})
}
and use it like'
<TextField ref="docLibelle" value={this.state.libelDoc} onChange={this._handleTextFieldChange}

Answer 2

Issue is, in value property you are using the props value and inside the onChange method updating the state value, because of that your textfield is read only.
Solutions:
1. Pass a function from parent component and onChange of textfield use that function to update the parent value, it will work, like this:
In Child component:
<TextField ref="docLibelle" value={this.props.lastuploadfile.content} onChange={this._handleTextFieldChange}/>
_handleTextFieldChange = (e:any) => {
this.setState({
showReferenceIsRequired : false,
});
this.props.updateValue(e.target.value);
}
In Parent component:
updateValue(value){
let = this.state.lastuploadfile;
lastuploadfile.content = value;
this.setState({lastuploadfile})
}
2. Store the props value in state variable and use that variable in value property of textfield.
Store the initial value of textfield in state variable:
constructor(props){
super(props);
this.state = {libelDoc: props.lastuploadfile.content}
}
Use that variable in value property in textfield:
<TextField ref="docLibelle" value={this.state.libelDoc} onChange={this._handleTextFieldChange}
Update that state variable in onChange method:
_handleTextFieldChange = (event, value) => {
this.setState({
showReferenceIsRequired : false,
libelDoc: value
});
}