Update/Append component into another component in React

Question

I am new to react and am in learning phase. What i am trying to do is to have a todo list with a due date. The following are my React components:

var TaskTitle = React.createClass({
    render: function() {
        return (
            <div className="taskTitle">
                <textarea  ref="tskTitle" onBlur={this.props.handleTitleBlur} onChange={this.props.setTaskTitle} name="tasktitle[]" id="tasktitle" value={this.props.taskTitle} className="tasktitle" ref="tskTitle"></textarea>
            </div>
        );
    }
}); 

Calendar Component

 var CalendarWithTime = React.createClass({
        componentDidMount: function() {
          this.myCalendarInput = $(ReactDOM.findDOMNode(this.refs.showCal));
          var self = this;
          this.CalendarWithTime = this.myCalendarInput.datetimepicker({
            format:'Y-m-d H:m',
            onShow:function(){
                self.props.calendarOpen(); //Updating parent state
            },
            onClose:function(){
                self.props.calendarClosed();//Updating parent state
            },
            onChangeDateTime:function(dp,input){
                self.props.dateChange(dp,input); //Updating parent state
            }
          });
        },
        render: function() {
            return (
                <div className="datetimeWrapper">
                    <div className="datetime clearfix">
                        <div ref="showCal" className="showCalendar">
                        </div>

                    </div>
                </div>
            );
        }
    });

Single Todo component

var ToDo = React.createClass({
    handleCalendarOpen:function(){
        this.setState({ canUpdate:false });
    },
    handleCalendarClose:function(){
        this.setState({ canUpdate:true });
        this.updateTaskData();
    },
    stateUpdate:function(obj){
        for(var key in obj){
            this.state[key] = obj[key];
        }
    },
    getInitialState: function() {
        return {taskID:null,taskTitle:null,taskDueDateTime:null};
    },  
    setTaskTitle:function(event){
        this.setState({ taskTitle: event.target.value,canUpdate:false });
    },
    componentWillReceiveProps:function(newProps){
            this.setState({ 
                taskTitle: newProps.tskTitle,
                taskDueDateTime:newProps.dueDate, 
                canUpdate:true
            });
    },
    updateTaskTitle:function(event){
        this.setState({taskTitle:event.target.value,canUpdate:false});
        this.updateTaskData();
    },
    updateTaskData:function(){
        var self =this;

        setTimeout(function(){
            $.ajax({
              url: $('meta[name="baseurl"]').attr('content')+'api/save_task',
              dataType: 'json',
              method:'post',
              data:self.state,
              cache: false,
              success: function(data) {
                if(data.status){
                    self.setState({canUpdate:true});
                }                   
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.dataURL, status, err.toString());
              }.bind(this)
            });
        },500);
    },
    componentDidMount:function(){
            var seldate=this.props.tskDueDate,dueDate=null,dueTime=null,dueLabel=null;
            if(seldate){
                dueDate = moment(seldate,'YYYY-MM-DD hh:mm a').format('YYYY-MM-DD'),
                dueTime = moment(seldate,'YYYY-MM-DD hh:mm a').format('hh:mm a'),
                dueLabel = moment(seldate,'YYYY-MM-DD hh:mm a').format('MMM Do, hh:mm a');
            }
            this.setState({
                taskTitle:this.props.tskTitle,
                taskDueDateTime:this.props.tskDueDate,  
                canUpdate:true,
            });
    },
    render: function() {
        return (
            <tr className="resp-table">
                <td><TaskTitle taskTitle={this.state.taskTitle} setTaskTitle={this.setTaskTitle} canUpdate={this.state.canUpdate} handleTitleBlur={this.updateTaskTitle} onUpdate={this.stateUpdate} key={this.state.taskID +"0"+this.state.taskID} taskID={this.props.tskID} /></td>   
                <td><CalendarWithTime  calendarClosed={this.handleCalendarClose} calendarOpen={this.handleCalendarOpen} dateChange={this.handleDateChange} dueDateTime={this.state.taskDueDateTime} dueDate={this.state.taskDueDate} dueTime={this.state.taskDueTime} dueLabel={this.state.taskDueLabel} key={this.state.taskID +"2"+this.state.taskID} /></td> 
            </tr>
        );
    }
});

//Load Previous tasks if any

var PrevTaskList = React.createClass({
        loadTaskList:function(){
            $.ajax({
              url: $('meta[name="baseurl"]').attr('content')+'api/get_task/',
              dataType: 'json',
              method:'post',
              data:{wsID:$('body').attr('data-wsid')},
              cache: false,
              success: function(data) {
                if(data.status){
                    this.setState({taskListData: data.taskList});
                }                   
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.dataURL, status, err.toString());
              }.bind(this)
            });
        },
        componentWillMount: function() {
            this.loadTaskList();
            setInterval(this.loadTaskList,this.props.pollInterval); // to render any new task added by other users
        },
        render: function() {
            if(this.state.taskListData){
                var TaskNodes = this.state.taskListData.map(function(task){
                    return(
                        <ToDo key={task.task_id}  tskID={task.task_id} tskTitle={task.task_title} tskDueDate={task.task_due_date} />
                    );
                },this);

                return (
                        <table ref="taskTable" id="tasktable">
                            <tbody >
                                {TaskNodes}
                            </tbody>
                        </table>
                );
            }
        }
}); 

Rendering Final Component

ReactDOM.render(<PrevTaskList pollInterval="5000"/>,$('#taskWrapper').get(0));

Now how can i add a new task on pressing enter key in the text area(TaskTitle) component? i am confused here of where to provide the event and how to render a empty task. Is my component modelling even right? Any help would be greatly appreciated.. Waiting for help.. hopefully