score:3
the method setstate()
is asynchronous, and updates are often batched together. in your case, ischecked
is updated together with the weight
, so when you set the weight
you still refer to the old value.
one solution is to use setstate()
's callback that will be called after the state is updated.
note: to get the checkbox checked
state, use the event object e
passed to the handler instead of querying the dom.
handlecheckboxclick(e){
var checked = e.target.checked;
this.setstate({ischecked : checked}, function() {
if(this.state.ischecked){
this.setstate({weight:'bold'});
}else{
this.setstate({weight:'normal'});
}
});
}
a better solution is to update both properties because you know if the checkbox is checked:
handlecheckboxclick(e){
var checked = e.target.checked;
this.setstate({
ischecked : checked,
weight: checked ? 'bold' : 'normal'
});
}
score:0
thats cause this.setstate({ ischecked : checkbox });
has not finished before you ask it in the if statement.
Source: stackoverflow.com
Related Query
- setState not updating when set to boolean
- React Native: setState not updating immediately when logging in console
- setState does not set the state properly, when dropdown values changes
- Receiving error when using setState within fetch to set response data and boolean value of state
- React setState of boolean value not updating
- Api call with timer not firing when props are updating faster than timer is set for
- setState is not updating when appending new state
- State not updating when using React state hook within setInterval
- React setState not updating state
- React setState not Updating Immediately
- useSelector not updating when store has changed in Reducer. ReactJS Redux
- React component not updating when store state has changed
- How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?
- react-chartjs-2 not updating graph when state updates
- State not updating when receiving new props (ReactJS)
- document is not defined when attempting to setState from the return of an async call in componentWillMount
- setState not updating font awesome icon
- Props not updating when redux state change in React Hooks
- Component not updating when I change the props that I pass to it in React
- Component not updating when redux store modified
- Express Session Cookie Not Being Set when using React Axios POST Request
- setState not working for updating an array in React
- Relay/GraphQL Schema cache not updating when I update schema on server side
- useEffect not being called and not updating state when api is fetched
- react-native: image not show when not set width or height
- Redux not updating components when deep Immutable state properties are updated
- React hooks setState not updating immediately
- How to set defaultValue for react-select Async and not reset when onBlur at v2.0.0?
- setState not triggering a re-render when data has been modified
- BackAndroid/BackHandler Event Listeners are not Triggered when set in a Modal's Child Component
More Query from same tag
- Bash script doesn't work in CodeKit Hook
- how to do a if in a export default
- 'LeafletProvider' is not exported from 'react-leaflet'
- Route is not matched
- how do you use sass in create-react-app with typescript?
- MUI can't read palette value
- Component not mounting: React-Router 1.0.0-rc1 + Redux
- How to use gapi in react
- Use MobX with React Context while using Mobx Persist Store?
- How to load the same component again in React?
- Paypal Integration in React JS
- Map is not defined
- ESLint error: 'default' is restricted from being used as an exported name
- Why does the transform-origin CSS property not show up in React?
- open ant design popover from two link
- Pagination firestore using react-redux-firebase library
- React/Redux/Redux-saga rendering only the last API value
- React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)
- Update State with record returned from API, after being updated
- How take input values to GET API response?
- React rendering
- Redux combineReducers Uncaught Type error: Cannot convert undefined or null to object
- why value is printed twice on console?
- Set history dynamically without page reload
- React.children.only expected to receive a single react element child Navigator
- Merge three lines into one multi color
- How to add a ClassName and remove it onScroll event in React.JS?
- React, Does render on parent makes children re-render?
- CORS error when using jsonPlaceHolder and react-admin
- Border Bottom makes Material UI icons smaller when hovered