React Input Type not editable

Question

I was adding dynamic values to the input file in react then I tried to edit that but it not at all editable.

var shop_profile_data = this.state.data.DETAILS;

<input id="shopname" className="inputMaterial"  value={shop_profile_data.NAME} type="text" required/>

Please give me the solution. Thanks

score 57 · Answer 1 · answered Mar 17 '16 at 17:23

57

Since value is always rendered with the same value (shop_profile_data.NAME) nothing is able to change. By setting value property you are making input a Controlled Component.

You need to add an onChange event and then set the shop_profile_data.NAME to a different value. Then the value of the input will change.

If you only want to set the initial value of the input, use defaultValue property (docs). defaultValue will set the initial value, but then allow the value to be changed.

For more read about Controlled vs Uncontrolled Components.

answered Mar 17 '16 at 17:23

Davin Tryon

66,517
15
143
132

But If I set defaultValue={shop_profile_data.SHOP_NAME} it was showing null only – Anandhakumar R Mar 17 '16 at 17:31
SHOP_NAME? I thought it was just name? – Davin Tryon Mar 17 '16 at 17:35
defaultValue={shop_profile_data.NAME} Sorry this was just name only – Anandhakumar R Mar 17 '16 at 17:36
Word of caution: defaultValue causes weird, hard to track down, bugs; and it doesn't let you render based on the input's current value, or update the value if you get new data. – Brigand Mar 17 '16 at 18:53

Roy Ryando · Answer 2 · 2019-02-14T09:39:26.820

42

Try using defaultValue instead of value, defaultValue will set the value and also editable. The code will look like this:

<input id="shopname" className="inputMaterial"  defaultValue={shop_profile_data.NAME} type="text" required/>

reference: Uncontrolled Components – React

edited Feb 14 '19 at 09:39

answered Feb 14 '19 at 09:31

Roy Ryando

1,058
12
30

solanki... · Answer 3 · 2017-02-11T14:44:23.217

The below code show how we can make an input tag editable in reactjs.

import React from 'react';
import { render } from 'react-dom';

    class App extends React.Component{
      constructor(props){
        super(props);
        this.state = {
          data: 2016
        }  
      }
      _handleChangeEvent(val) {
        return val;
      }
      render(){
        return (
          <div>
            <input type='number' 
                   onChange={()=>{this._handleChangeEvent(this.state.data);}} 
                   defaultValue={this.state.data} />
          </div>
        );
      }
    }

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

React Input Type not editable

3 Answers3

Linked