score:0

actually the input fields have not become non-editable. the getderivedstatefromprops lifecycle is called, everytime a prop or state is changed.

so, whenever any change is made to the inputfield, the props or state get changed and the getderivedstatefromprops lifecycle is called again. hence, resetting the textfields to the initial values.

perform a conditional check within getderivedstatefromprops, such that the initial values are set only when the lifecycle is called for the first time.

for example, try something like:

//  set initialcount to 0 in constructor 
constructor () {
    this.state = { initialcount: 0 };
}


static getderivedstatefromprops(nextprops, prevstate){
    if (prevstate.initialcount === 0) {
        return({
        initialcount: prevstate.initialcount + 1,
        email: nextprops.user && 
           nextprops.user.hasownproperty("emails") ? 
           nextprops.user.emails[0].address : prevstate.email,
           password: prevstate.password,
           name: nextprops.user && 
           nextprops.user.hasownproperty("name") ? nextprops.user.name 
           : prevstate.name,
           mobilenumber: nextprops.user && 
           nextprops.user.hasownproperty("mobilenumber") ? 
           nextprops.user.mobilenumber : prevstate.mobilenumber,
           address: nextprops.user && 
           nextprops.user.hasownproperty("address") ? 
           nextprops.user.address.text : prevstate.address
       });
    }
}

Related Query

More Query from same tag