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         


        

Answer 1

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 2

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