score:2
Accepted answer
you can just put it into separate function, its a bad idea to access "this" in functional components
const [state, setstate] = react.usestate({
firstname: "john",
lastname: "doe",
id: "12345"});
const getfullname = () => {
return `${state.firstname} ${state.lastname}`
}
score:1
the problem lies in the function usestate
, which can accept either initialstate or a function producing it:
function usestate<s>(initialstate: s | (() => s)): [s, dispatch<setstateaction<s>>];
to fix, extract initalstate to a separate object:
const initialstate = {
firstname: "john",
lastname: "doe",
id: "12345",
getfullname():string {
return `${this.firstname} ${this.lastname}`;
},
};
const [state, setstate] = react.usestate(initialstate);
also, consider using an iife for constructing the initialstate:
const initialstate = ((firstname, lastname) => ({
firstname,
lastname,
id: "12345",
getfullname():string {
return `${firstname} ${lastname}`;
},
}))('john', 'doe');
Source: stackoverflow.com
Related Query
- Accessing the "this" keyword in a React state object
- Accessing the whole state object in React 16.8
- React router - dynamic routes - accessing state object via the router
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- Updating the array object in React state using immutability helper
- Form created with React doesn't update the backing state object
- accessing object attributes in the react render method
- Is it ok to pass the entire Redux state object into a React component?
- this.state not the same as state in this object
- Why is the state not updating inside this react Hooks component?
- Why does React re-render differently whether the state is an object vs a string?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to update the state of nested json object in react using hooks
- Why is there a semi-colon in the object structure for expected props in this typescript react component?
- React Forms Updating nested state object - reconstructing the state object from input
- The this keyword is undefined in React base class
- how do i update state in react for updating the value of an object inside an array using array.map function
- When accessing the current state inside a React Hook's setState() call, is the prevState variable a copy or a direct reference to the state object?
- Why is this React component state recognized in the JSX return() for the first <p> but not for the second <p>?
- Can't store user input from <from> in the react state object
- accessing the 'this' keyword in a react functional component
- What is the right way to toggle a value inside object state in React hooks?
- React Hooks Form Handling: Update the state of an object with multiple string items and one array item
- Why does React see the old state in this example?
- React update only one object of the state
- What is the equivalent of this way of looping over an object in React
- React redux - pushed object in the state is not mapped but initialState is
- in React i need to get the state from local storage and then set another state conditionally based on this state
- Accessing the previous state of a functional component with state being an object
- React Router: props aren't passed down when directly accessing the URL of child component. Will I need to use the same state in both parent and child?
More Query from same tag
- theme does not recognize material-ui
- Meteor: Two types of user, the way to go with complexe UserAccounts?
- React-Router-DOM does not work with nested paths
- How to dispatch add and view functions inside same connect function in redux?
- How can I cast NextJS router.query as a number?
- Test event listeners in enzyme/jest within useEffect
- React-router not able to load nested pages
- Getting React.createElement: type is invalid when replacing component in select-react
- Consume API with basic authentication using Javascript without exposing key pair
- Trying to break the text in 2 line with React
- How to remove :focus pseudo class via react/ next js?
- React, implementing Dark-Light-Mode with localStrorage
- How to change opacity with clickEvent in React?
- Working with react-spring and styled-components
- Using html entity   in react hyperscript
- How do I update specific rows in Google Spreadsheets using Reactjs?
- React: How to save jsx to state then show jsx in dom
- Cannot read property 'map' of undefined Error when using axios.get inside useEffect hook
- ReactCSSTransition on table rows and empty table state
- IntelliJ TypeScript plugin complains that "window is not defined" in React project
- ReactJS: Map through using groupby in lodash
- How to toggle a menu when clicking on a link?
- 'match' property not set on props when using MemoryRouter in test
- Invalid hook call with useCallback in react
- Concurrent API calls using Promise.allSettled with progress notification
- Unable to play a different song using setState method in ReactJs
- Unable to render promise response to html div
- Framer Motion animation repeats on state change
- How to test (Unit testing) reducer in React which filtered an array of objects
- How to Redirect after POST request in react-router v5 with Hooks