ListGroupItem radio style select with Active prop

This seems like it should be incredibly straightforward so I must be missing something obvious but how can I dynamically set the active prop on a ListGroupItem when its selected? I have a series of

{plans.map((plan) => (
    <ListGroupItem ref={plan.name} onClick={(event) => this.handleSelectedPlan(plan, event)}>
      {plan.public_name}: <span className="pull-right">{plan.amount.usd} / {plan.interval}</span>
    </ListGroupItem>))}

I assumed that having the following in my onClick handler:

this.refs[plan.name].active = true

would be enough but it doesn't actually highlight it as is shown in the components page of the docs. Instead, it creates and sets an "active" boolean in the component but this clearly isn't what is supposed to happen. As per the react-bootstrap docs, this is what its supposed to look like:

<ListGroupItem href="#" active>

I imagine I can then make it a radio style setup by unsetting the others manually using the same principle as setting it.

Any help would be greatly appreciated.

Solution

Alrighty, that was a roller coaster of emotions. To make this work, i did the following. Each ListGroupItem was declared as:

<ListGroupItem ref={plan.name} 
      href="#" 
      onClick={(event) => this.handleSelectedPlan(plan, event)} 
      active={this.state.planName == plan.name ? true : false}>

and don't forget to set the initial state:

getInitialState() {
  return { planName: "my_monthly_plan" };
},

and the onClick handler looks like this:

handleSelectedPlan(plan, event) {
  event.preventDefault();

  this.setState({ planName: plan.name });
  this.props.chosenPlan(plan);
},

and it works as expected.