score:1
there are few changes needs to be done under map
method,
-> assign key to the immediate parent under map method and in your case it is label
<label key={index}>
....
</label>
-> then you have to modify the onchange
value like,
<input
type="checkbox"
checked={cb.value}
onchange={(e) => this.checkboxstatehandler(e,index)}
/>
here the event and index needs to passed down as an arguments.
-> then in checkboxstatehandler
function get the parameters and assign the event.target.checked
value to checkboxes[idx].value
checkboxstatehandler = (event, idx) => {
const { checkboxes } = this.state;
checkboxes[idx].value = event.target.checked;
this.setstate({
checkboxes
});
};
the above code will get rid of all warnings and errors.
score:2
this will work for you:
import react from "react";
import "./styles.css";
class app extends react.component {
state = {
checkboxes: [
{ name: "check 1", value: false },
{ name: "check 2", value: false },
{ name: "check 3", value: false }
]
};
checkboxstatehandler = (event, idx) => {
const { checkboxes } = this.state;
checkboxes[idx] = {
...checkboxes[idx],
value: event.target.checked,
}
this.setstate({
checkboxes
});
};
rendercheckboxes = () => {
return this.state.checkboxes.map((cb, index) => (
<label>
{cb.name}
<input
type="checkbox"
key={index}
checked={cb.value}
onchange={e => this.checkboxstatehandler(e, index)}
/>
</label>
));
};
render() {
return <div>{this.rendercheckboxes()}</div>;
}
}
export default app;
you must send the event and index to the method in order to change the value, also checkboxstatehandler
needs a little changes.
Source: stackoverflow.com
Related Query
- Reactjs - Controlling Multiple Checkboxes
- React handling multiple checkboxes
- Multiple checkbox values handling with ReactJS
- Handling Multiple Checkboxes with Material UI and Formik
- handling multiple ajax calls in reactjs
- Handling Multiple Checkboxes ReactJS?
- Dynamically creating and handling multiple togglebuttons in Reactjs using Material-ui ToggleButtons
- Multiple and Multi selected Checkboxes in ReactJS
- How to add multiple classes to a ReactJS Component?
- Call multiple functions onClick ReactJS
- Correct way of Creating multiple stores with mobx and injecting it into to a Component - ReactJs
- Mapping checkboxes inside checkboxes ReactJS
- Multiple Axios Requests Into ReactJS State
- ReactJS apply multiple inline styles
- How to call multiple functions on the same onClick event ReactJS
- Handling multiple inputs in React
- Simple function to Validate checkboxes in reactJS
- Multiple file upload with reactjs
- How handle multiple select form in ReactJS
- Render multiple items on reactjs component
- using Material-ui checkboxes with the reactjs and redux
- reactjs how to input multiple file from form
- Handle multiple className in makeStyle() - ReactJS
- Promise.then is not a function - handling multiple API calls in React
- Handling the screen orientation change in ReactJS
- ReactJS - how to fetch multiple data with useEffect
- add multiple node box selector on the canvas of VisJS network graph in ReactJS
- ReactJs with Iframe events and changes handling
- put multiple files to one zip folder before downloading on client side reactJS
- multiple forms in one page - reactjs
More Query from same tag
- How to store JWT token in cookie React fetch
- How to added text to specific mapped element?
- SingleDatePicker by react-dates is not closing on change
- NextJS - ReferrenceError: document is not defined
- React something is wrong with router
- How to get type of one specific prop of a react component?
- jump to specific time in videojs using react hooks
- gatsby can't fetch all graphql data on vercel production
- React - Uncaught Invariant Violation:
- DOM cast to string
- React Leaflet with LayersControl handling object datas
- handleRemove function for Todo List app with an array of objects
- MomentJs: Having to import each moment locale for all possible languages?
- A transparent image I'm linking to isn't transparent when being displayed
- How can I mock window.screen.width property?
- How to create a list of youtube components on React.js
- Adding custom colors to palette gives Object is possibly 'undefined'. TS2532
- Accessing Bootstrap method from inside React app
- Remove duplicates from inner array of array of objects
- How to make Show more / Show less toggle button for API dynamic data in paragraph or simple text in REACT?
- problems while using array.map for null entry in react
- Firebase: referencing docs with a string vs. referencing docs with a ref. Is there a difference?
- Setting Page Title with React-Router-Config
- "TypeError: Object(...) is not a function" error when trying to use react hooks (alpha)
- How to get new token from Cognito from the frontend?
- How can I split 3 columns into 2 evenly?
- Multiple calls to state updater from useState in component causes multiple re-renders
- Using Router DOM with React.js TypeError: Cannot read property "name" of undefined
- ReactJS recieving form errors from server
- Invalid configuration object in webpack