Update immutable nested data like breeze

updateable_component.js

//root data is stored in reducer
const rootData = fromJS({
  company: [
    {
      id: 'company_1',
      name: 'foo',
      campaign: [
        {
          id: 'cam_1',
          name: 'bar',
          adgroup: [
            {
              id: 'ad_1',
              name: 'baz'
            },
            {
              id: 'ad_2',
              name: 'baz2'
            },
          ]
        },
      ]
    },
  ]
})



const RootComponent = React.createClass({

  getInitState(){
    //you can get data from reducer instead of set init state.
    return {
      data: rootData
    }
  },

  companyUpdater(updater){    
    this.setState({
      data: this.state.data.updateIn(['company'], updater),
    })
  },

  render(){    
    return (
      <div>
        {
          data.map((d, i) => {
            return (
              <CompanyComponent key={i} data={d} updater={this.companyUpdater}/> 
            )
          })
        }
      </div>
    );
  }
});

const CompanyComponent = React.createClass({
  
  campaignUpdater(updater){
    //the key point of updateable component is that it will "push" the update path for children.
    //Thus, the children doesn't need to know the detail of data structure.    
    this.props.updater((d)=>d.updateIn([this.props.key, 'campaign'], updater));
  },

  updateName(e){
    //it can help component focus on updating thier own field.
    this.updater(d=>d.updateIn([this.props.key, 'name'], ()=>e.target.value))
  },

  render(){    
    const {data} = this.props;
    return (
      <div>
        <input value={data.get('name')} onChange={this.updateName} />
        {
          data.get('campaign').map((d, i) => {
            return (
              <CampaignComponent key={i} data={d} updater={this.campaignUpdater}/> 
            )
          })
        }
      </div>
    );
  }
});

const CampaignComponent = React.createClass({
  
  adGroupUpdater(updater){
    this.props.updater((d)=>d.updateIn([this.props.key, 'adgroup'], updater));
  },

  updateName(e){
    this.updater(d=>d.updateIn([this.props.key, 'name'], ()=>e.target.value))
  },

  render(){    
    const {data} = this.props;
    return (
      <div>
        <input value={data.get('name')} onChange={this.updateName} />
        {
          data.get('adgroup').map((d, i) => {
            return (
              <AdGroupComponent key={i} data={d} updater={this.adGroupUpdater}/> 
            )
          })
        }
      </div>
    );
  }
});

const AdGroupComponent = React.createClass({  

  updateName(e){
    this.updater(d=>d.updateIn([this.props.key, 'name'], ()=>e.target.value))
  },

  render(){    
    const {data} = this.props;
    return (
      <div>
        <input value={data.get('name')} onChange={this.updateName} />        
      </div>
    );
  }
});