Alt edit single item in a list. Submits request to Rails api which then updates the Stripe API and awaits response. I can't tell where the single plan update happens and gets sent back to the plan list as props.

0 PlanList.jsx

class PlanList extends Component {
  static getStores(){
    return [PlanStore];
  }

  static getPropsFromStores(){
    return PlanStore.getState();
  }

  componentDidMount(){
    PlanActions.load();
  }

  render() {
    if (this.props.loading) return <h2>LOADING...</h2>

    return (
      <div>
        {this.props.plans.map((plan) => {
          return <PlansListItem key={plan.name} plan={plan} />
        })}
      </div>
    )
  }
}

PlanList = connectToStores(PlanList)


export default PlanList;

1 PlanListItem.js

var PlanListItem = React.createClass({
  updatePlan(key, value){
    var newPlan = this.props.plan;
    newPlan[key] = value;
    PlanActions.edit(newPlan);
  },

  render(){
    console.log(this.props.plan.name);

    return(
          <EditableField
            save={this.updatePlan}
            keyName="name"
            value={this.props.plan.name}
          >
            <h3>{this.props.plan.name}</h3>
          </EditableField>
        </div>
      </div>
    )
  }
});

2 EditableField.js

var EditableField = React.createClass({
  propTypes: {
    save: React.PropTypes.func.isRequired,
    value: React.PropTypes.string.isRequired
  },

  getInitialState(){
    return {
      isEditting: false,
      value: this.props.value
    }
  },

  handleEdit(){
    this.setState({isEditting: true});
  },

  handleSave(event){
    event.preventDefault();

    var newValue = this.refs.input.getDOMNode().value;
    if(this.state.value != newValue && newValue != ""){
      this.props.save(this.props.keyName, newValue);

    }
    this.setState({isEditting: false});
  },

  render(){
    var textField;
    if(this.state.isEditting){
      textField = (
        <form onSubmit={this.handleSave}>
          <input ref="input" defaultValue={this.props.value} />
          <i onClick={this.handleSave} className="icon inline icon-check"/>
        </form>
      )
    } else {
      textField = (
        <div>
          {this.props.children}
          <i onClick={this.handleEdit} className="icon inline icon-pencil" />
        </div>

      )
    }
    return(
      <div className="editable-field">
        {textField}
      </div>
    )
  }
});

3 PlanActions.js

class PlanActions{
  update(objects){
    this.dispatch(objects);
  }

  load(){
    this.dispatch();

    request.get(constants.API_PATH + "/plans")
      .set('Accept', 'application/json')
      .end((error, response) => {
        this.actions.update(JSON.parse(response.text));
      });
  }


  edit(object){
    request
      .patch(constants.API_PATH + "/plans/" + object.id)
      .send({plan: object})
      .end((error, response) => {
        this.dispatch(JSON.parse(response.text));
      });
  }
}

export default alt.createActions(PlanActions);

4 PlanStore.js

class PlanStore{
  constructor(){
    this.plans = [];
    this.loading = false;

    this.bindListeners({
      load: PlanActions.LOAD,
      update: PlanActions.UPDATE,
      edit: PlanActions.EDIT,
      delete: PlanActions.DELETE,
    })

  }

  load(){
    this.loading = true;
  }

  update(plans){
    this.plans = plans;
    this.loading = false;
  }

  edit(plan){
    // empty? Still updates component since I'm not returning false, but how does it push the new plan into this.plans?
  }
}