CODEWITHSUNDEEP
reactjs
Anandhakumar R
Anandhakumar R

Reputation: 609

React Input Type not editable

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

Upvotes: 44

Views: 80725

Answers (3)

Roy Ryando
Roy Ryando

Reputation: 1288

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

Upvotes: 46

solanki...
solanki...

Reputation: 5098

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

Upvotes: 19

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 58

Related Questions