From 687dc74462bcb7d28ce21b7576bafea00331a276 Mon Sep 17 00:00:00 2001
From: ardaninsaturnu <hsmclk2505@gmail.com>
Date: Thu, 2 Jun 2022 21:35:17 +0300
Subject: [PATCH] state started.

---
 .../08_states_boilerplate/src/index.js        |  2 +
 .../08_states_boilerplate/src/mine.js         | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 08_Day_States/08_states_boilerplate/src/mine.js

diff --git a/08_Day_States/08_states_boilerplate/src/index.js b/08_Day_States/08_states_boilerplate/src/index.js
index c2d10c6..6b7faf8 100644
--- a/08_Day_States/08_states_boilerplate/src/index.js
+++ b/08_Day_States/08_states_boilerplate/src/index.js
@@ -1,6 +1,7 @@
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
+import Mine from './mine'
 import asabenehImage from './images/asabeneh.jpg'
 
 // Fuction to show month date year
@@ -246,6 +247,7 @@ class App extends React.Component {
           minusOne={this.minusOne}
           count={this.state.count}
         />
+        <Mine/>
         <Footer date={new Date()} />
       </div>
     )
diff --git a/08_Day_States/08_states_boilerplate/src/mine.js b/08_Day_States/08_states_boilerplate/src/mine.js
new file mode 100644
index 0000000..6c02431
--- /dev/null
+++ b/08_Day_States/08_states_boilerplate/src/mine.js
@@ -0,0 +1,39 @@
+// index.js
+import React from 'react'
+
+const dog = 'https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg';
+const cat = 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg';
+
+export default class Mine extends React.Component {
+
+    changeUrl = () => {
+        if( this.state.imgLink === dog ){
+            this.setState({ imgLink : cat })
+        }else {
+            this.setState({ imgLink : dog })
+        } 
+    }
+
+  // declaring state
+  state = {
+    count: 0,
+    imgLink: cat
+  }
+  render() {
+    // accessing the state value
+    const count = this.state.count
+    return (
+      <div className='App'>
+        <img src={ this.state.imgLink } alt='cat' />
+        <button onClick={this.changeUrl}>Change ulaaan</button>
+        <h1>{count} </h1>
+        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
+          Add One
+        </button>
+        <button onClick={() => this.setState({ count: this.state.count - 1 })}>
+          Decrease One
+        </button>
+      </div>
+    )
+  }
+}