I can't edit Text Field in Material-UI

Question

I developed a React App using Material-UI then I tried to create independent Components,

check the below independent components(<PanelDiv/>),

render() {
        return (
            <div className="panelDiv-component" style={{display:this.props.display}}>
                <div className="panel-field-content">
                    <TextField
                        floatingLabelText={this.props.heading}
                        type={this.props.inputType}
                        value={this.props.value}
                    />
                   {/* <input  defaultValue className="form-control"></input>*/}
                </div>
            </div>
        );
    }

I tried to use the component like this,

<PanelDiv
    heading='name'
    inputType="text"
    value={this.state.userData.name}
    display={this.state.display[0]}
/>

But I can't update input field in this way.Also there is no error. How can i solve this? I want to update my input field.

Please check my input filed in the below image :

Answer 1

Because you are controlling the value of TextField by using value attribute but you are not updating the value by using onChange function, Since value of TextField is not changing so it becomes read only.

Solution:

Specify the onChange function with TextField and update the value inside that, Like this:

<TextField
    floatingLabelText={this.props.heading}
    type={this.props.inputType}
    value={this.props.value}
    onChange={this.props._change}
/>

Inside parent component:

_Change(event, value){
   //update the value here
}


<PanelDiv
    heading='name'
    inputType="text"
    value={this.state.userData.name}
    _change={this._change}
    display={this.state.display[0]}
/>

Answer 2

If you pass value as a prop to TextField you can't change that text! On Material-UI official documentation they have used defaultValue="default val" as a prop. So I used defaultValue as a prop! It worked fine for me!

<TextField 
   type="text"
   defaultValue={this.props.val}
   onChange={handleChange} 
  />