CODEWITHSUNDEEP
javascriptreactjs
Monica Jennings
Monica Jennings

Reputation: 55

Changing state for multiple elements in page

In my react-app i have a list that is rendered dynamically from an array, each item has a checkbox and an input, the input by default is disabled, when i click on the checkbox this input should be enabled if it meets a specific condition, i have managed to do some of the work, but I'm facing some issues like when i click on one of the checkboxes all inputs get enabled, and this input has a value i want to be able to edit it but i can't here is the code:

Initial state

cards: [],
disabledInput: false

Mapping the list:

return this.state.cards.map(card => (
<Checkbox key={card.id} onClick={this.setState({ disabledInput: true })} />
<Input value={this.state.card.name} disabled={this.state.disabledInput} onChange={e => this.setState({ text: e.target.value })} />
));

Upvotes: 0

Views: 80

Answers (3)

Prabu samvel
Prabu samvel

Reputation: 1223

You need to keep the initial disable states of each checkbox true as an array and map that individually into each checkbox.

cards = [{
 name: 'card 1',
 disabledInput: true
 }, {
 name: 'card 2',
 disabledInput: true
}]

changeDisableState = (i) => {
  let cards = this.state.cards;
  cards[i].disabledInput = !cards[i].disabledInput;
  this.setState({cards});
}

return this.state.cards.map((card, i) => (
<Checkbox key={card.id} onClick={() => this.changeDisableState(i)} />
<Input value={card.name} disabled={card.disabledInput}/>
));

Edited: Instead of a separate array you can keep a disable field inside the card state itself.

Upvotes: 1

andy mccullough
andy mccullough

Reputation: 9571

You need to maintain a disabledInput flag for each card, at the minute you only have one across all cards.

Your card state should look something like - 

cards = [{
   name: 'card 1',
   disabledInput: false
}, {
   name: 'card 2',
   disabledInput: true
}]

Upvotes: 0

Ga&#235;l S
Ga&#235;l S

Reputation: 1599

Each checkbox should have a boolean to manage its own state (checked or not). I created a Codesandbox that should solve your problem

Upvotes: 0

Related Questions