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
});
}
}
Source: stackoverflow.com
Related Query
- getderivedstate function makes state uneditable
- The function makes the dependencies of useEffect Hook
- React - useState - why setTimeout function does not have latest state value?
- ReactJS function isn't getting latest state
- React hook equivalent to callback function after setting state
- Can i have a function inside a state in react?
- Cannot access State inside Function
- React Hooks: accessing state across functions without changing event handler function references
- Why does the 'useState' hook invoke the initial state when it's a function reference?
- non-serializable values were found in the navigation state when passing a function in params
- ReactJS - Need to click twice to set State and run function
- setState/use State in external function react
- Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. in Index.js
- Render methods should be a pure function of props and state
- Why doesn't useState function initialize state every time?
- React hooks function component prevent re-render on state update
- Lost input focus on hooks function state change
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- Put function that returns promise in redux state
- Sync queryParameters with Redux state and react router for function components
- Function called in setTimeout not using current React state
- React Native : Access Component state inside a static function
- How can ı pass function with state for react useContext
- React - State Hook map is not a function
- React - State Hook map is not a function
- setTimeout() function is not detecting a state change and keeps executing the recursive function
- How to access state from callback function
- React hooks, set return value of a function to state causes infinite loop
- Can't see state inside method helper function using hooks
- Set state based on previous one in render function
More Query from same tag
- Testing preConfirm hook of SweetAlert2 in a React module
- Question about nested try catch statements and error handling
- Axios.delete in React: `Error:DELETE chrome-extension://...`
- I'm writing a test case in React related to authentication(using axios), But I am stuck because the test case is not passing
- How to solve "Expected to return a value in arrow function" error in eslint
- tailwind 3.0.23 classes not being applied in real time in storybook
- How to access properties added by mapStateToProps in mapDispatchToProps?
- Delete space between components
- Multiple providers and Router in React hooks
- Restore Redux store from Angular app in ReactJS application
- Redux: holding 'current-X` pieces of state vs. storing id's only
- Typescript React, How to provide type infomation for a component which recives a custom input component as props?
- ReactJS Chat Websockets emits message twice
- React Redux async action tests
- react hook form material ui checkbox array
- Improper return type with custom hook from useState
- how to get the selected color
- dispatch multiple actions with redux-observable
- How to re execute componentDidMount again when i click the component again?
- NGINX Run multiple application on same port with different route path
- Switch case to render multiple components on JSX
- Restyle React child components dynamically from parent by a certain property
- How to add additional files to CRA WorkBox Precache?
- Send a prop to a child component
- Conditionally render a badge for active/inactive User
- How to add constant inside Joi validator?
- I can't get npm start to run
- axios GET request with form data in React JS
- How do I set the parent state before rendering?
- Seating Plan generator in React