score:1
i would rather deconstruct the object and have a default object in the case of any data
// this could be even outside of your class.
const defaultobj = {
firstname: '',
familyname: '',
address: 'enter your address',
city: 'select your city',
country: 'select your country',
field: '',
}
/* the constructor*/
constructor(){
const { userprofile = {} } = this.props.location.state || {};
this.state = {
...defaultobj
...userprofile
}
}
score:0
the "select your city" shouldn't be in your state. it's better to just leave it empty and pass it to the form as {state.city || "select your city"}
js:
if (this.props.location.state) {
const {firstname, familyname, address, country, field} = this.props.location.state.userprofile;
this.setstate({firstname, familyname, address, country, field, message = 'save my changes'})
}
jsx (view):
<p>city: {state.city || "select your city"}</p>
<p>message: {state.message || 'create'}</p>
score:1
at least a point that is possible to simplify: in location.state
stores an object and the local state can be filled from it directly:
this.state = this.props.location.state
? this.props.location.state.userprofile
: {
firstname'',
familyname: '',
address: 'enter your address',
city: 'select your city',
country: 'select your country',
field: '',
};
the message
field looks like an unchangeable data, so it is better not to put it into the react state, but use a ternary operator in the render
method
Source: stackoverflow.com
Related Query
- Reducing number of props
- React: Are there respectable limits to number of props on react components
- Send props to Number Format - Material UI TextField
- How to pass a variable number of props to a JSX tag in React
- TSX: Props type definition for a number input
- How to pass large number of props to a react component to react render method
- Passing number as props in React becomes Object object
- React hooks array passing in number when passed into props of component
- in ReactJS, how can i filter the rendered result according to an id number passed in the props
- How to pass props to {this.props.children}
- What is the difference between state and props in React?
- react-router - pass props to handler component
- Pass props to parent component in React.js
- Access props inside quotes in React JSX
- Can I update a component's props in React.js?
- React component initialize state from props
- Updating state on props change in React Form
- Pass props in Link react-router
- React.useState does not reload state from props
- Invariant Violation: Could not find "store" in either the context or props of "Connect(SportsDatabase)"
- React eslint error missing in props validation
- Pass react component as props
- How to set component default props on React component
- Why shouldn't JSX props use arrow functions or bind?
- React functional component default props vs default parameters
- Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
- Get version number from package.json in React Redux (create-react-app)
- Passing object as props to jsx
- How to sync props to state using React hooks : setState()
- How to specify (optional) default props with TypeScript for stateless, functional React components?
More Query from same tag
- useEffect to make event handler for own defined event
- fullcalendar v5 useref() in react does not contain calendar
- When I use react router with webpack, it shows the error "React.createElement: type is invalid"
- i is not defined using map() with ES6
- Code making a lot of unnecessary Firestore Read Operations
- onMouseEnter doesn't work when mouse go fast through the element
- Child to parent communication in React on Asp.net core 2.0
- Cycle through objects in an array by setting state with a button React
- Object as input variable in mutation: GraphQL - Apollo - React
- React : Best practice to handle complex objects passed as props
- difference between using children prop directly and using React.Children.toArray method
- Send message from service woker to react component in some of the browser which donot support BroadcastChannel
- Prevent custom hook from reinitialization on each re-render
- Return the correct length of a object in React's state after filtering it
- ReactJS: In which order the code in each component runs?
- Express.js multer don't see text fields only file
- Issues loading comments in Realtime
- How do I fire off a react action when url changes?
- Mocking Auth0Client in @auth0 in jest
- State is not passing correctly with redux
- React Modal doesn't show up correctly
- Reactjs app doesn't show image preview in safari
- React Render a Component in two places
- How to prevent parent component from re-rendering with React (next.js) SSR two-pass rendering?
- How to use a ReactJS Component with Clojurescipt/Reagent
- TypeError: pictures.forEach is not a function
- Focus on next Input field on Enter in Redux Form
- How to create a React Modal (which is appended to <body>) with transitions?
- When and how to fetch data for detail view in react/router/redux app?
- Material UI Confirm Alert is hidden behind dialog