score:0
issue
you are mutating your state object in handlenavparent
.
const handlenavparent = (id, e) =>{
let ischecked = e.target.checked;
if (ischecked) {
const checkboxarray = navarray; // <-- state reference
const index = checkboxarray.findindex(object => object.id === id);
checkboxarray[index].ischecked = !checkboxarray[index].ischecked; // <-- state mutation!
setnav(checkboxarray); // <-- saved reference back into state
}
}
this doesn't trigger a rerender since the navarray
array reference never updated to a new array reference. you don't see the updated state until you click to submit the form and the submithandler
calls setmsgerror
and updates state and triggers a rerender with the side-effect from above.
solution
use a functional state update to toggle the checked value.
const handlenavparent = (id, e) =>{
const { checked } = e.target;
if (checked) {
setnav(state => state.map(el => el.id === id ? {
...el,
ischecked: !el.ischecked,
} : el));
}
}
Source: stackoverflow.com
Related Query
- Problem twice click on submit handler in React JS
- My click handler is firing twice with different values in React
- Change the handler to avoid click pressed twice requirement - React
- How can I add a click handler to BODY from within a React component?
- React Bootstrap + Formik - show errors after I click submit button
- Adding a click handler to React children for methods on the child component
- React not Finding <input/> Value in Submit Handler
- React Formik onSubmit RestAPI called twice, once click a submit button
- How to test function and inner statement after form submit handler in jest/enzyme react
- How can we write a click handler for a Stateless Function Component in React JS
- How to get the time in seconds after click on submit button using React Count Down Timer
- React Event Handler Button Click Not Working on First Click
- react formik, test if submit function called on click - jest,enzyme
- React Context value not defined inside click handler
- My button needs to be clicked twice to render the new component for the first click React
- Typing the click handler when component is generic (polymorphic react component)
- Sending input value to click handler in React
- Why do I have to click twice for an event in react js
- TypeError passing a function to a React click handler
- React medium editor - need to click twice to be able to write if clicking on placeholder
- React form not displaying the correct inputs on the screen after I click submit button
- Which object owns react click handler code?
- React addEventListener handler function called TWICE
- Why do I have to click Submit button TWICE in order to update my useState() hook?
- Click handler issue in React
- Click handler on mapboxGL not respondig to updated state using react hooks with typescript
- React click handler passed to child component is not working
- React for table rows to bind (this) click event handler
- React Array of components - click handler issue
- Can't test submit handler in React component
More Query from same tag
- Is React's setState asynchronous or something?
- Searchkit track change on searchbox input
- How can I subscribe to the change of components using <BrowserRouter>
- Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Laravel React JS
- Change <a> tag text color of React Component
- WebStorm/PhpStorm warning for react attributes in jsx like className
- Changing language with React Hooks and Contex API
- ReactJS Fetch User Data from API and add to table
- React Router access params from another component
- using css selectors in styled components
- How to handle conditionals in a styled component
- Sort & render an array of objects using a select in ReactJS
- NextJs CORS issue
- Hide Chat Without losing the messages it is rendering in UseEffect
- How do I add and remove classNames in a react component?
- Usage of state and props
- Issues with req.query, req.params, req.body using express+axios in MERN app
- reactjs: how to define componentDidMount inside ES6 const?
- Table rowspan missing td textcontent after page break
- React - Highlighting text inside of dangerouslySetHTML for given Xpath
- How to use array of routes?
- Remove Object out an Array
- Window.Print not producing same result as using the browser print feature
- Creating dictionary in React
- Use Navigate function not working (React)
- Routing for external react component/module
- Direct to base nested react route
- Pass value from class method to a react component
- React 18 - Type 'null' is not assignable to type 'Element | DocumentFragment'
- React passing value from dropdown back to parent component