ReactJS - Getting Started -2

In my previous post we discussed on creating a todo app and we have creates a list of todo where we passed data. Now let’s enhance the same todo app and see if we can add “edit” button. So we are going to make the list of todo as read only and once user click on edit button, the list should be editable.
By this example we will cover on how we can make different communicate with each other.
Initialization of app will not have any changes as such –
var _todos = [{id: 1, text: "This is one comment"},{id: 2, text: "This is *another* comment"}];
ReactDOM.render(,document.getElementById('todo'));
As there are 2 modes, editable and non editable, we will maintain a state to begin with.
Also we need to have a click handler for our edit button. In React, the data flows unidirectional and it is recommended to implement on the same line. In our code, todolist and edit button are 2 components loaded at same level(there is no parent child relation) so if we want to make communication between these components. We need to pass a handler from parent to child button. Once button is pressed, it will notify parent about this, and then parent can communicate this to child components via state change.
Edit button –
var EditButton = React.createClass({
    render:function(){
        return();
    }});
We created a html button and we have a prop associated with it – “onClick”. If you see carefully we have passed the handler in props from parent.so on click of the button we will be executing the handler passed.
TodoApp –
In toDoApp component, we modified the render function and have introduced “EditButton”. Also we introduced 2 functions – getInitialState and handleEdit.
getInitialState is function which sets the initial state of the component. We are require to put the default value of state that we are planning to use (else component will throw error).
handleEdit – this is the function we introduced so that we can handle the click of edit button in the parent. In this function we just modify the state of the component. Once the component’s state is modified, react will call the render function of component with new state. If we see that any child component need not to refresh, then we will have to explicitly stop its rendering.
var TodoApp = React.createClass({
    getInitialState: function() {
        return {
            editview: false            //by default read only view
        };
    },
    handleEdit:function(){
        this.setState({
            editview: true    // on click of edit, change state to editable.
        });      
    },
    render: function () {
        return (
           

                           

               
               
           
        );
}});
If you see above, we passed another prop as “editable” to ToDoList, which will make use this prop to set todo as editable or not.
There is not much change in the ToDoList, we are just passing new prop to Todo component.
var TodoList = React.createClass({  
    render: function(){
        var todos  = this.props.todos;
        var editable = this.props.editable;
        var todoNodes = todos.map(function(todo){return ();}            
    );
    return (

{todoNodes}

);
    }
});
In Todo component, we are just consuming this new field from prop and making the input as disable/enable.
var Todo = React.createClass({
    render: function(){
        var todo = this.props.current;
        var edit = this.props.edit === true;              
        if(!edit){
            return();      
        }
        return();      
    }});