Building ReactJS Example with Event Handling

Posted on

Here is another simple example of ReactJS in which bunch of CommentBox components has been created and wrapped into a Board layer which is also a React Component and therefore events are binding to Save & Edit button under CommentBox component.

Set of comments text is initialized in parent Component i.e Board and each comment text is getting rendered into CommentBox Component by iteration.

Here is complete code:-

                <!DOCTYPE html>
        <html>

        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width">
            <title></title>
        </head>

        <body>
            <div id="content"></div>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
            
            <script type="text/babel">

                class CommentBox extends React.Component{
                constructor(props){
                    super(props);
                    this.state = {
                    editable : false
                    };
                }

                save(event){
                    this.props.updateCommentText(this.refs.commentTxt.value,this.props.index);
                    this.setState({
                        editable:false
                    })
                }
                remove(){
                    this.props.removeCommentText(this.props.index);
                    
                }
                edit(){
                    this.setState({
                        editable:true
                    })
                }
                renderForm(){
                    return (
                    <div className="row">
                        <div><textArea ref="commentTxt" name="commentBox" defaultValue={this.props.children}></textArea></div>
                        <button type="button" className="btn btn-danger" onClick={this.save.bind(this)}>Save</button>
                    </div>
                    );
                }
                renderHtml(){  
                    return (
                        <div className="row">
                        <div>{this.props.children}</div>    
                        <button type="button" className="btn btn-danger" onClick={this.edit.bind(this)}>Edit</button>
                        <button type="button" className="btn btn-success" onClick={this.remove.bind(this)}>Remove</button>
                        </div>
                    );
                }

                render() {
                    if(this.state.editable){
                        return this.renderForm(this);
                    }else{
                        return this.renderHtml(this);
                    }
                }
                }

            class Board extends React.Component{
                constructor(props){
                    super(props);
                    this.state ={
                        comments:[
                            'Techical Comments',
                            'Wordpress Comments',
                            'Facebook Comments'
                        ]
                    }
                }
                updateComment(text,i){
                    console.log("Saving Comment..."+text+" index ["+i+"]")
                    var arr = this.state.comments;
                    arr[i] = text;
                    this.setState({comments:arr})
                }
                removeComment(i){
                    console.log("Removing Comment..." + "index ["+i+"]")
                    var arr = this.state.comments;
                    arr.splice(i,1);
                    console.log("After removing a record :"+arr)
                    this.setState({comments:arr});
                }    

                eachComment(text,i){
                    return (
                                <CommentBox key={i} index={i} updateCommentText={this.updateComment.bind(this)}  removeCommentText={this.removeComment.bind(this)}> {text}</CommentBox> 
                            );
                }

                render(){
                    return(
                        <div className="container-fluid">{
                        this.state.comments.map(this.eachComment.bind(this))
                        }
                        </div>
                    );
                }
            } 
            ReactDOM.render(
                <Board />
                , document.getElementById('content'))
            </script>
        </body>

        </html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s