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

Had the same error. I was not able to key in anything and it was because there was no name props included. example:

<TextField
  type="email"
  name='email'/>

Answer 3

Look at this example - https://jsfiddle.net/y857yeLq/

You should define a function, which is handles of text change and pass it to onChange property. In this example I used state for storing current text field value. I see, that you use props for that, but the principle is the same - function should update props in your case.

const { TextField, MuiThemeProvider, getMuiTheme } = MaterialUI;

 class SliderExampleControlled extends React.Component {

  state = {
    value: '',
  }

  render() {
    console.log(this.state);
    return (
      <div style={{width: '50%', margin: '0 auto'}}>
        <TextField
          hintText="Type here"
          value={this.state.value}
          onChange={(e) => this.setState(e.target.value)}
        />
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <SliderExampleControlled />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Answer 4

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} 
  />

Answer 5

I was running into this problem as well and I needed the onClick function to take more than just the event I also needed it to take the row number because my state had an array representing the rows in a table. I was able to do that using this chunk of code

onChange={(e) => this.nameChange(e.target.value, row.row_num)}

then in my function called nameChange I was able to update the value