logo
down
shadow

How to setstate for the dynamic checkboxes in a loop in react?


How to setstate for the dynamic checkboxes in a loop in react?

Content Index :

How to setstate for the dynamic checkboxes in a loop in react?
Tag : javascript , By : PsyberMonkey
Date : January 11 2021, 05:14 PM

it helps some times I am loading checkboxes in a loop. I have difficulties in setting the states for the dynamic checkboxes. , Constructor:
constructor(props) {
  super(props);
  this.state = {
    checkBoxObj: {}
  };
}
<input type="checkbox" 
     checked = {this.state.checkBoxObj[i] || false}
     onChange={() => this.passMemberID(i)}
/>
passMemberID = (i) => {
  this.setState({
    checkBoxObj: {
      ...this.state.checkBoxObj, ...{[i]: !this.state.checkBoxObj[i]}
    }
  })
}

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Loop through form checkboxes for dynamic list of checkboxes


Tag : javascript , By : Simon Hogg
Date : March 29 2020, 07:55 AM
Hope that helps , So you want all inputs whose ids start with cbProducts?
$("form input[id^='cbProducts']");
_ctl = $("form input[id*='cbProducts']");
$("form input[id='cbProducts' + elm]");
$("#cbProducts" + elm);

react setState with dynamic key


Tag : reactjs , By : user93312
Date : March 29 2020, 07:55 AM
wish of those help Basic rule is:
We can use Computed property names concept and use any js expression to compute the object property name dynamically. For that we need to put the expression inside [].
var obj = {
   [10 * 20 + 1 - 5]: "Hello"
};

console.log('obj = ', obj);
onChange(e) {
    this.setState({
      [e.target.id]: e.target.value
    })
}
onChange(e) {
    let obj = {};
    obj[e.target.id] = e.target.value
    this.setState(obj);
}

react native dynamic setstate with string and dynamic index


Tag : react-native , By : 40a
Date : March 29 2020, 07:55 AM
may help you . For React Native to detect changes to state and thus re-render your view you must call setState in immutable manner. So in your case try the following:
//copy state
const newState = {...this.state};
//access property - "key1, key2, etc" whatever index is.
newState['key'+index] = 1;
// set new state
this.setState(newState);

Using a dynamic key to setState in React


Tag : javascript , By : Martin Kopp
Date : March 29 2020, 07:55 AM
Does that help When setting state with a dynamic key, you need to wrap the key within [] like
<Modal
  onTextChange={(text, key) => {
    this.setState({
      event: {
        [key]: text
      }
    })
  }}
/>

dynamic setState to add new dynamic property in react


Tag : javascript , By : taviso
Date : March 29 2020, 07:55 AM
it should still fix some issue If I understood what you're trying to do correctly, you just needed to spread the value object inside of your map:
onChange = (e, i) => {
    this.setState({
      items: this.state.items.map(o => ({
        ...o,
        value: {
          ...o.value,  // <- this
          [this.state.lang[i]]: e.target.value
        }
      }))
    });
  };
Related Posts Related QUESTIONS :
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com