Add event handler to React.DOM element dynamically

Question

I\'m working with a RadioButtonGroup component which is like radio input but with buttons:

Answer 1

To get an api like this (similar to ), we need to use the cloneWithProps addon.

  
    Test 1
    Test 2
    Test 3
  

All this does is take each child, add a click handler, and conditionally add a className of 'active' to it. You easily can (and should) modify it to take the active class name as a prop.

var RadioButtonGroup = React.createClass({
  render: function(){
    return 
{React.Children.map(this.props.children, this.renderItem)}
  },
  renderItem: function(button, index){
    return React.cloneElement(button, {
      className: this.props.value === index ? ' active ' : '',
      onClick: function(){ 
        this.props.onChange(index); 
      }.bind(this),
      key: index
    });
  }
});

demo

If you don't want to use cloneWithProps, you could use a wrapper div, but styling may be a bit more complex.

  renderItem: function(button, index){
    return React.createElement('div', {
      className: this.props.value === index ? ' active ' : '',
      onClick: function(){ 
        this.props.onChange(index); 
      }.bind(this),
      key: index
    }, button);
  }

The reason everything uses index is because you're passing react elements, which are opaque. There's no clean way to get any data out of these buttons, but we do know their index because we're iterating over them using React.Children.map. An alternative api would look like this:

Test 1,
   test2: Test 2,
   test3: Test 3
}} />

Here we can iterate over this.props.options, and pass the key to the onChange callback, and take e.g. 'test1' as a value prop.