diff --git a/src/components/about.js b/src/components/about.js
index d14e7f2..6034541 100644
--- a/src/components/about.js
+++ b/src/components/about.js
@@ -1,23 +1,24 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 class About extends Component {
     render() {
+        const { userName } = this.props
         return (
             <div>
-                <h1>Hello About {this.props.userName}</h1>
+                <h1>Hello About {userName}</h1>
                 <Link to='/'>Go to Home</Link>
             </div>
         )
     }
 }
 
-function mapStateToProp(state){
-    return({
+const mapStateToProp = (state) => {
+    return ({
         userName: state.root.userName
     })
 }
 
 
-export default connect(mapStateToProp,null)(About);
+export default connect(mapStateToProp, null)(About);
diff --git a/src/components/chat.js b/src/components/chat.js
index 2a79ad2..23c577e 100644
--- a/src/components/chat.js
+++ b/src/components/chat.js
@@ -4,45 +4,32 @@ import { connect } from 'react-redux';
 import ChatBox from './chatbox';
 
 class Chat extends Component {
-    constructor(props) {
-        super(props)
-    }
-    setRecipient(recUser) {
-        console.log('recipient', recUser);
-
-        this.props.changeRecUID(recUser);
-        this.props.history.push('/chatbox');
+    setRecipient = (recUser) => {
+        const { changeRecUID, history } = this.props
+        changeRecUID(recUser);
+        history.push('/chatbox');
     }
     render() {
-        console.log(this.props.currentUser, '////////////////');
-        console.log(this.props.allUsers, 'allUsers')
-        console.log(this.props.allMessages, 'aaaaaaaaaa');
+        const { allUsers } = this.props
         return (
             <div>
                 <h1>Hello Chat</h1>
-                {this.props.allUsers ?
+                {allUsers ?
                     <ul>
-                        {
-
-                            this.props.allUsers.map((user, index) => {
-                                return (
-                                    <li><button key={index} onClick={this.setRecipient.bind(this, user, user.username)}>{user.username}</button></li>
-                                )
-                            })
+                        {allUsers.map((user, index) => {
+                            return (
+                                <li><button key={index} onClick={this.setRecipient.bind(this, user, user.username)}>{user.username}</button></li>
+                            )
+                        })
                         }
-                    </ul>
-                    :
-                    null
+                    </ul> : null
                 }
-
-                {/* <ChatBox /> */}
-
             </div>
         )
     }
 }
 
-function mapStateToProp(state) {
+const mapStateToProp = (state) => {
     return ({
         currentUser: state.root.currentUser,
         allUsers: state.root.users,
@@ -50,9 +37,8 @@ function mapStateToProp(state) {
         recipientID: state.root.recipientID
     })
 }
-function mapDispatchToProp(dispatch) {
+const mapDispatchToProp = (dispatch) => {
     return ({
-        // changeUserName: ()=>{dispatch(changeUserName())}
         changeRecUID: (recUser) => {
             dispatch(changeRecipientUID(recUser));
         }
diff --git a/src/components/chatbox.js b/src/components/chatbox.js
index bddf521..ba10866 100644
--- a/src/components/chatbox.js
+++ b/src/components/chatbox.js
@@ -10,57 +10,54 @@ class ChatBox extends Component {
             textAreaVal: ''
         }
     }
-    _textAreaHandler(event) {
+    _textAreaHandler = (event) => {
         this.setState({
             textAreaVal: event.target.value
         })
     }
-    sendMessage() {
-        console.log(this.state.textAreaVal);
+    sendMessage = () => {
+        const { sendMessage, currentUser, recipientID } = this.props
+        const { textAreaVal } = this.state
         let messageData = {
-            senderID: this.props.currentUser,
-            receiverID: this.props.recipientID,
-            message: this.state.textAreaVal
+            senderID: currentUser,
+            receiverID: recipientID,
+            message: textAreaVal
         }
-        console.log(messageData, 'messageDatamessageData');
-        this.props.sendMessage(messageData);
+        sendMessage(messageData);
     }
     render() {
-        console.log(this.props.messages, 'aaaaaaaaaa')
+        const { recipientName, messages, recipientID, currentUser } = this.props;
+        const { textAreaVal } = this.state
         return (
             <div>
-                <h2>{this.props.recipientName}</h2>
+                <h2>{recipientName}</h2>
                 <div style={{ width: '250px', height: '300px', border: '2px solid black' }}>
 
-                    {this.props.messages.map((msg, ind) => {
-                        return (msg.receiverID === this.props.recipientID && msg.senderID === this.props.currentUser) || (msg.receiverID === this.props.currentUser && msg.senderID === this.props.recipientID) ?
+                    {messages.map((msg, ind) => {
+                        return (msg.receiverID === recipientID && msg.senderID === currentUser) || (msg.receiverID === currentUser && msg.senderID === recipientID) ?
                             <ul style={{ border: '1px solid red', height: '40px', overflow: 'scroll' }}>
-                                {
-                                    msg.receiverID === this.props.recipientID ?
-                                        <li style={{ listStyleType: 'none', textAlign: 'start', border: '1px solid blue' }}>
-                                            {msg.message}
-                                        </li>
-                                        :
-                                        <li style={{ listStyleType: 'none', textAlign: 'end', border: '1px solid blue' }}>
-                                            {msg.message}
-                                        </li>
-                                }
+                                {msg.receiverID === recipientID ?
+                                    <li style={{ listStyleType: 'none', textAlign: 'start', border: '1px solid blue' }}>
+                                        {msg.message}
+                                    </li>
+                                    :
+                                    <li style={{ listStyleType: 'none', textAlign: 'end', border: '1px solid blue' }}>
+                                        {msg.message}
+                                    </li>}
                             </ul>
                             :
                             null
                     })}
 
                 </div>
-                <textarea value={this.state.textAreaVal} onChange={this._textAreaHandler.bind(this)}></textarea>
+                <textarea value={textAreaVal} onChange={this._textAreaHandler.bind(this)}></textarea>
                 <button onClick={this.sendMessage.bind(this)}>send</button>
-
-
             </div>
         )
     }
 }
 
-function mapStateToProp(state) {
+const mapStateToProp = (state) => {
     console.log('state**', state)
     return ({
         currentUser: state.root.currentUser,
@@ -70,9 +67,8 @@ function mapStateToProp(state) {
     })
 }
 
-function mapDispatchToProp(dispatch) {
+const mapDispatchToProp = (dispatch) => {
     return ({
-        // changeUserName: ()=>{dispatch(changeUserName())}
         sendMessage: (msg) => {
             dispatch(sendMessage(msg));
         }
diff --git a/src/components/home.js b/src/components/home.js
index b88799c..03c2c20 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import {connect} from 'react-redux';
-import {changeUserName} from '../store/action/action';
+import { connect } from 'react-redux';
+import { changeUserName } from '../store/action/action';
 class Home extends Component {
-
-    _changeData(){
-        console.log('event called');
+    _changeData = () => {
         this.props.changeUserName();
     }
 
@@ -20,16 +18,16 @@ class Home extends Component {
     }
 }
 
-function mapStateToProp(state){
-    return({
+function mapStateToProp(state) {
+    return ({
         userName: state.root.userName
     })
 }
-function mapDispatchToProp(dispatch){
-    return({
-        changeUserName: ()=>{dispatch(changeUserName())}
+function mapDispatchToProp(dispatch) {
+    return ({
+        changeUserName: () => { dispatch(changeUserName()) }
     })
 }
 
-export default connect(mapStateToProp,mapDispatchToProp)(Home);
+export default connect(mapStateToProp, mapDispatchToProp)(Home);