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

Answer 1

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 .

Answer 2

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

Answer 3

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'));

Answer 4

<input className="form-control" type="text" placeholder="Your Location" value={<Location/>}  

它的给定对象对象