score:0
Accepted answer
No needs to know which element is checked or not in global,
First change currentData to 0 in this.state
constructor(props) {
super(props);
this.state = {
currentData: 0,
limit: 2
};
}
Then change selectData function
selectData(id, event) {
let isSelected = event.currentTarget.checked;
if (isSelected) {
if (this.state.currentData < this.state.limit) {
this.setState({ currentData: this.state.currentData+1 });
}else{
event.preventDefault()
event.currentTarget.checked = false;
}
} else {
this.setState({currentData: this.state.currentData - 1});
}
}
And remove checked attribute from input (when page load is 0) ´
<div className="inputGroup">
<input
id={id + item.name}
name="checkbox"
type="checkbox"
onChange={this.selectData.bind(this, id + item.name)}
/>
<label htmlFor={id + item.name}>{item.name} </label>
</div>
Source: stackoverflow.com
Related Query
- selection limit function not working on checkbox form reactjs
- ReactJS Array.push function not working in setState
- ReactJS form submit preventdefault not working
- autoComplete "on" not working in ReactJs form
- Checkbox expands another checkboxes when checked not working reactjs
- reactjs enable disable button through a function not working
- React redux Form checkbox `defaultChecked` not working
- material ui datagrid checkbox row selection is not working
- <Helmet> reactJs not working under function cause error
- set state in a function not working - reactJs
- Use serverless function to findById in MongoDB Database via Mongoose, and render result in React form - not working
- formik form validation not working reactjs
- Ant design Form validation is not working and not updating input values when component is from a state that is passed from a function
- onChange function on checkbox isn't working | ReactJS
- Function setInterval is not working in reactJs
- Checkbox becomes unclickable after checkbox limit function occur reactjs
- ReactJS map function not working on a lightbox gallery
- react hooks: remember me checkbox in Login form not working
- Checkbox property DefaultChecked in reactjs not working with states updated by radio button
- onClick={OnButtomSubmit} function not working in ReactJs
- for loop not working in render function reactjs
- import module.fucntion working but import { function } from '../../module' not working in ReactJS
- Reactjs - Building form from data set, FormElement not returning to the render function
- Function not working in app.js but in index.html working library reactjs
- ScrollToBottom function not working in React hook reactjs
- How to remove one item from an array using filter() in ReactJS - function not working properly
- map() function in Reactjs is not working with state
- Checkbox not working within mapping function react js css
- Onclick function not working for glyphycons in reactjs component
- onClick function is not working in ReactJs on Button
More Query from same tag
- dispatch action using bindactioncreator in react-redux
- React - Injecting inline style with animation
- React hook Search on button click not working
- Child components are getting different state versions from Parent state during the same render
- How to import multi images in ReactJS
- How to get function from parent component in React
- How do I insert a component within a MAP of other component in React?
- Using If/Else to write radius of circle in ReactJS
- Sequantially make text elements on fade in on page load in react component
- Uncaught TypeError: Cannot read property '_myPrivateFunction' of undefined
- DatePicker in Redux Form
- how to get the values that were sent from axios.post in the backend
- React router with http-server
- Rendering a Table of Data in React from JavaScript Object
- React js onclick toggle class in map function
- How can I update Material UI theme dynamically via Redux store?
- Customize multiple mui components
- Cant find the issue in my index. Github pages problem
- How can I clear autocomplete values
- React hooks, update one state in response of another state update
- Unable to change state when using redirection with history.push
- How to assign csv data to state in react?
- How do you get an element out of a redux reducer?
- React HOC: TypeError: Cannot call a class as a function
- Can React re-render only a portion of component?
- Calling a Function Inside Map Function
- I am currently install "npm install --save dev webpack webpack-dev-server" but I face the issue
- Add support for next-css and next-less simultaneously in next.config.js
- Reactjs best strategy to define a variable for render method
- React.js - Array.unshift() not updating array on front-end