React - handle multiple toggle buttons (input type radio) with one function

Question

I've got my custom icon toggle component:

class ToggleIconSwitch extends Component {

  render() {
    const { leftIcon, rightIcon, name, handleOptionChange, checked, leftValue, rightValue } = this.props

    return (
      <div className="toggle-switch-icon-wrapper">
        <div className="toggle-switch">
          <input 
            type="radio" 
            name={ name } 
            id={ leftValue } 
            value={ leftValue } 
            checked={ checked === leftValue } 
            onChange={ handleOptionChange }
          />
          <label htmlFor={ leftValue } className="icon">{ leftIcon }</label>
          <input 
            type="radio" 
            name={ name } 
            id={ rightValue } 
            value={ rightValue } 
            checked={ checked === rightValue } 
            onChange={ handleOptionChange }
          />
          <label htmlFor={ rightValue } className="icon">{ rightIcon }</label>
        </div>
      </div>
    )
  }
}

and then I've got multiple toggles on some page and I want to handle each toggle input change...

_.map(acl, (permission) => {
  return (
    <div className="row" key={ permission.id } >
      <ToggleIconSwitch
        name={ _.toString(permission.id) }
        leftIcon={ <VisibilityIcon className="svg" /> }
        leftValue="read"
        rightIcon={ <CreateIcon className="svg"/> }
        rightValue="write"
        checked={ permission.permission }
        handleOptionChange={ this.toggleUsersPermission }
      />
      <IconButton 
        aria-label="Delete" 
        className="icon-button animate"
        onClick={ this.openDeleteDialog(permission) }
      >
        <CloseIcon className="icon-button-red" />
      </IconButton>
    </div>
  )
})

The problem is that the toggleUsersPermission function is always called only for the first ToggleIconSwitch component, even if I click on another ToggleIconSwitch. It also does not react when I click on the other toggle component's label, which is checked in first toggle component in list. I'm always getting event.target of the first toggle in list ... Why?

Try to click on the icons in CodeSandbox here

Are the permission.id values unique? The key property needs to be unique for each sibling element dynamically created like this. Otherwise React gets all confused. — Dylan Pierce
– Dylan Pierce, Commented Apr 5, 2018 at 21:51
I think this prior Stack thread might help. Talks about context binding. Alternatively, you could pass in the ID of the individual toggle component to toggleUsersPermission and then have that return a handle function which "knows" which element to work with. — uncleoptimus
– uncleoptimus, Commented Apr 6, 2018 at 0:19
@DylanPierce yes, permission.id values are unique @uncleoptimus it doesn't work, I tried to pass this.toggleUsersPermission.bind(this, permission.id) as handleOptionChange function, but it's same as before, it doesn't handle any toggle clicks but first, and on the other toggles it handles clicking on the unchecked value (of first toggle), but it always returns permission.id of the first toggle — ketysek
– ketysek, Commented Apr 6, 2018 at 8:18
@uncleoptimus try my example in CodeSandbox which I provided today ... if you click on the icons in second toggle (it's not styled now), you'll see that radio buttons in fthe first toggle are blinking (dispatching event) — ketysek
– ketysek, Commented Apr 6, 2018 at 8:48

ketysek · Accepted Answer · 2018-04-06 09:09:27Z

1

The problem was in labels, they have all equal htmlFor value and also input ids were same

edited Apr 6, 2018 at 9:09

answered Apr 6, 2018 at 8:56

ketysek

1,2192 gold badges19 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - handle multiple toggle buttons (input type radio) with one function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related