score:3
Accepted answer
togglepersonhandler =()=>{
const doesshow = this.state.showperson;
this.setstate({showperson : !doesshow});
}
your code can be written as the following. we are setting the new state, using the setstate
call, using the values in the previousstate
.
we get the previous value of showperson
and 'reverse' the truth value using the negation !
operator.
togglepersonhandler = () => {
this.setstate((previousstate) => {
return {
showperson : !previousstate.showperson
}
});
}
this is the recommended format to write setstate
calls that depend on the previous state.
truth table
this is how the negation operator affects a boolean value, shown in a truth table
----------------------------
| showperson | !showperson |
----------------------------
| true | false |
----------------------------
| false | true |
----------------------------
Source: stackoverflow.com
Related Query
- how does this check statement works in react?
- How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?
- How does React router works and what is the difference between <link> and<Route>
- How does this React code work on CodePen even if no preprocessor is selected?
- How import statement works in ES6 for React Components
- How does this React example work?
- React JS - How does this function work to delete JSON data?
- How does Array.map() works with react components?
- Where does the root reducer come from in this redux react example and how does dispatch knows which reducer to go?
- How does this functional component using react hooks get its parameters?
- How does setState in React work in this scenario?
- How does this React code translate to class representation?
- how does this fix the state closure problem with react hooks?
- How does "import" statement will work in server side rendering using react js?
- Why does this react form works only for the first time?
- How does one count duplicates within an array of data-items and also does display this result via a react view?
- Is this mapping in React cached? If so, how does it work?
- How to make this component looped in React (by counting the fat thact it receives props and does some calculation and has static titles)
- How do I check the data structure of this imported data in React
- I wonder how the attribute 'items' works in this React code (The way of delivering this props)
- How can i check additional category exist when mapping this array in react js?
- How to use switch statement inside a React component?
- How does shallow compare work in react
- Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks
- How to solve Warning: React does not recognize the X prop on a DOM element
- How to check how many React children have a certain prop?
- React - How to check if JWT is valid before sending a post request?
- How does webpack handle multiple files importing the same module React
- Does React use requestAnimationFrame? If so, how does it use it?
- How to add logical if statement when rendering React components?
More Query from same tag
- I want to align the LearnMoreButton text next to h4 text. With the existing, the learn more shows in next line
- Why does redux dispatch happen before hook values are updated?
- minor error in if statement in render function
- how can I combine multiple sagas into rootSaga?
- Using map function to present the array of objects with bootstrap cards
- Why does my React component display incorrect data when filtering by values controlled by useState()?
- Is it compulsory to use <Route> only inside of App.js? throwing error like "Error: Invariant failed: You should not use <Link> outside a <Router>"
- Get height of tab bar on any device in React-Navigation
- React Material UI 1.0 Select multiple params onChange
- Pass object as parameter in Link
- Recharts Pie chart .. can pie slice move when selected?
- ReactDOM.render() is not working when called again after making the changes in template
- Firebase Data Provider + custom data provider - React admin
- React onChange doesn't return updated value after updating the state
- Use json to populate a case switch statement in React
- Testing React store with mock functions
- ReactJS: Sort Options in alphabetical order
- Style not being applied correctly to Navbar React component
- React - how to prevent re-render for child component
- Why does this.setState work only after two submit events in react js application?
- Is there a way to add headings separating data in react-virtualized
- How to fix problem: TypeError: self.env.emit is not a function?
- React - selenium tests
- Redirect rendering a blank page when conditionally rendering
- Detect DOM loading completion
- How should I avoid this "Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler."
- Can have simultaneously at onClick function props and a function at reactjs?
- Express not setting Cookie
- What is nextStater in React Router getComponents and where does it come from?
- Modifying state with response from backend express server