class ButtonContainer extends React.Component {

    constructor(props) {

        super(props);

        this.ganttControl = this.props.ganttControl;

    }

     // componentWillReceiveProps will updates the newly recevied ganttcontrol props.

    componentWillReceiveProps(nextProps) {

        if (nextProps.ganttControl !== this.ganttControl) {

            if (this.ganttControl !== null)

              this.ganttControl = nextProps.ganttControl;

       }

    }

    // To add a task.

    addRow() {

        var newTask = this.getNewTask();

        this.ganttControl.AddNewItem(newTask);

         //Add the newly added task to Dictionary.

        this.addedTasks.Add(newTask.ID, newTask);

    }

    // To return a new task object.

    getNewTask() {

        return {

            "Name": "New Task ",

            "ID": this.ganttControl.Model.GetNewID(),

            "StartTime": new Date("2014/02/02"),

            "Effort": new RQTimeSpan(0, 12, 30, 0, 0),

            "ProgressPercent": 50,

            "Description": "Description of Task"

        };

    }

    render() {

        return (

            <div id="Div1">

                <button id="addRow" onClick={() => this.addRow()}>Add task</button>

            </div>

        );

    }

}

class GanttControlCustomDataBinding extends React.Component {

    constructor() {

        super();

        this.state = { ganttControl: null }

    }

     // ganttControl data rerendered once the GanttLoaded event was triggered.

    GanttLoaded($gantt_container,ganttControl) {

        this.setState({ ganttControl: ganttControl })

    }

       // Here, GanttControlCustomDataBinding renders multiple Component .

    render() {

        return (

               <div>

                <ButtonContainer ganttControl={this.state.ganttControl}/>

                 <GanttControl

                  ...........

                  ............

                 GanttLoaded={(ganttControl) => this.GanttLoaded(ganttControl)}

                 />

            </div>

        );

    }

}

ReactDOM.render(<GanttControlCustomDataBinding />, document.getElementById('container'));