React Event Handling & Control Re Rendering 😍

src/App.js

@@ -2,11 +2,13 @@ import './App.css';
 import Clock from "./components/Clock";
 
 function App() {
+    console.log('App component render');
     return (
         <div className="App">
             {/*<header className="App-header">*/}
-                <h1>Hello Sourav</h1>
-                <Clock local='bn-BD'/>
+            <h1>Hello Sourav</h1>
+            {/*<Clock local='bn-BD'/>*/}
+            <Clock/>
             {/*</header>*/}
         </div>
     );

src/components/Button.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+
+class Button extends Component {
+    // Should not use *************************
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        const {change: currentChange, local: currentLocal} = this.props;
+        const {change: nextChange, local: nextLocal} = nextProps;
+
+        return !(currentChange === nextChange && currentLocal === nextLocal);
+        // return currentChange !== nextChange;
+        // if (currentChange === nextChange && currentLocal === nextLocal) {
+        //     return false;
+        // }
+        // return true;
+    }
+
+    render() {
+        console.log('Button component render')
+        const {change, local} = this.props;
+        return (
+            <div>
+                <button type='button' onClick={() => change(local)}>Click Here</button>
+            </div>
+        );
+    }
+}
+
+export default Button;

src/components/Clock.js

@@ -1,11 +1,20 @@
 import React, {Component} from 'react'
+import Button from './Button';
 
 class Clock extends Component {
     // constructor(props) {
     //     super(props);
-    //     this.state = {date: new Date()};
+    //     this.state = {
+    //         date: new Date(),
+    //         local: 'bn-BD'
+    //     };
+    //     this.handleClick = this.handleClick.bind(this);
     // }
-    state = {date: new Date()};
+
+    state = {
+        date: new Date(),
+        local: 'bn-BD'
+    };
 
     componentDidMount() {
         this.clockTimer = setInterval(() => {
@@ -20,20 +29,41 @@ class Clock extends Component {
         clearInterval(this.clockTimer);
     }
 
+    // handleClick = (event) => {
+    handleClick = (local) => {
+        // event.preventDefault();
+        // console.log(this);
+        this.setState({
+            // local: 'en-US'
+            local
+        });
+        console.log('The button was clicked by handleClick');
+    }
+
     tick() {
         this.setState({
             date: new Date(),
         })
     }
 
     render() {
+        console.log('Clock component render');
+        const {date, local} = this.state;
+        // const {local} = this.props;
         return (
             <div>
                 <h1 className='heading'>
                     <span className='text'>
                         {/*{new Date().toLocaleString(this.props.local)}*/}
-                        {this.state.date.toLocaleString(this.props.local)}
+                        {/*{this.state.date.toLocaleString(this.props.local)}*/}
+                        {/*{date.toLocaleString('bn-BD')}*/}
+                        {date.toLocaleString(local)}
                     </span>
+                    <p>{this.props.local} Bangladesh</p>
+                    {/*<button onClick={this.handleClick}>Click Here</button>*/}
+                    {/*<button onClick={this.handleClick.bind(this, 'en-US')}>Click Here</button>*/}
+                    {/*<button onClick={() => this.handleClick('en-US')}>Click Here</button>*/}
+                    <Button change={this.handleClick} local='en-US'>Click Here</Button>
                 </h1>
             </div>
         )