Unable to type in input after adding value in React Js

Question

I have tried with the following code with react js

import React, { Component } from 'react';
import Sidebar from './../Sidebar';
import Header from './../Header';
import {get_profile} from './../services/Services';
import $ from 'jquery'; 


export default class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = { userDetails: '' } ; 
  }
  componentWillMount() {
    $(window).scrollTop(0)  
    console.log('sdfds')
    get_profile().then((response) => {  

        var userResults = $.parseJSON(response.text);    
        this.setState({ userDetails: userResults.response });
         console.log(userResults);
    }).catch((error) => {
            //alert(error)
        console.log(error); 

    });
  }
  handleChange(event) {
        console.log(event.target.id)
        this.setState({[event.target.name]: event.target.value});        
 }

  render() {
    return (
    <div className="admin-panel">
        <Sidebar />
        <Header />
        <div className="main-content">
            <div className="contents">
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-sm-6">
                            <h2 className="page-title">Profile</h2>
                            <div className="form-group">
                                <label >First Name</label>
                                <input type="text" id="firstName"  className="form-control" value={this.state.userDetails.firstName}  />
                            </div>
                            <div className="form-group">
                                <label >Last Name</label>
                                <input type="text" id="lastName"  className="form-control" value={this.state.userDetails.lastName} />
                            </div>
                            <div className="form-group">
                                <label >Email</label>
                                <input type="text" id="email" name="email" className="form-control" value={this.state.userDetails.email} />
                            </div>
                            <button type="button" className="btn btn-squared btn-success margin-inline" onClick={(e)=> {this.profileUpdate()}}>Update</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    );
  }
}

After fetching the results i'm unable to edit the input box value. I have tried with defaultValue but that also not working for me. I'm struck with this issue, Kindly help me to solve the issue.

Ritesh Bansal · Accepted Answer · 2017-07-04 13:09:12Z

1

Just pass an onChange handler to the input which will update the value of the corresponding key of userDetails like this:

    <input
      ...
      value={this.state.userDetails.firstName}
      onChange={this.onChange}
      />
    onChange(e) {
      this.setState((previousState) => {
        const userDetails = previousState.userDetails
        return { userDetails: {...userDetails, firstName: e.target.value} }
      })
    }

or you can write a common onChange function like this:

    <input
      ...
      value={this.state.userDetails.firstName}
      onChange={(e) => {this.onChange(e.target.value, 'firstName')}}
      />
    <input
      ...
      value={this.state.userDetails.lastName}
      onChange={(e) => {this.onChange(e.target.value, 'lastName')}}
    />
    <input
      ...
      value={this.state.userDetails.email}
      onChange={(e) => {this.onChange(e.target.value, 'email')}}
    />

    onChange(value, key) {
      this.setState((previousState) => {
        const userDetails = previousState.userDetails
        return { userDetails: {...userDetails, [key]: value} }
      })
    }

answered Jul 4, 2017 at 13:09

Ritesh Bansal

3,2482 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user12541823 Over a year ago

Could you have a look here? onChange doesn't work for me stackoverflow.com/questions/61658623/…

Collectives™ on Stack Overflow

Unable to type in input after adding value in React Js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related