Add JavaScript::beta::Counter (React)

README.md

@@ -294,4 +294,6 @@
     [``go to description``](https://www.codewars.com/kata/5a95947f4a6b342636000173) [``go to solution``](javascript/kyu_6/easter-egg-list-in-reactjs.js) 
 * rank: ````5 kyu```` language: ``JavaScript`` task name: ``Moving Zeros To The End``  
     [``go to description``](https://www.codewars.com/kata/52597aa56021e91c93000cb0) [``go to solution``](javascript/kyu_5/moving-zeros-to-the-end.js) 
+* rank: ````beta```` language: ``JavaScript`` task name: ``Counter (React)``  
+    [``go to description``](https://www.codewars.com/kata/5f266f1f0dc7f30033d7b01d) [``go to solution``](javascript/beta/counter-react.jsx) 
 

javascript/beta/counter-react.jsx

@@ -0,0 +1,46 @@
+/*
+ https://www.codewars.com/kata/5f266f1f0dc7f30033d7b01d/train/javascript
+*/
+
+import React, {useState, useEffect} from "react"
+
+const colors = ['red', 'green', 'blue', 'pink', 'yellow', 'gray', 'white', 'black', 'almond', 'brown']
+
+export const getRandomColor = () => {
+    const randomIndex = Math.floor(Math.random() * 10)
+    return colors[randomIndex]
+}
+
+export default function Counter() {
+    const [counter, setCounter] = useState(0)
+    const [color, setColor] = useState('null')
+
+    const increment = () => {
+        setCounter(counter + 1)
+    }
+    const decrement = () => {
+        setCounter(counter - 1)
+    }
+    const reset = () => {
+        setCounter(0)
+    }
+
+    useEffect(() => {
+        setColor(getRandomColor())
+    }, [counter])
+
+    return (
+        <div style={{borderTop: `10px solid ${color}`}}>
+            <div className="value">{counter}</div>
+            <button className="increment" onClick={increment}>
+                -
+            </button>
+            <button className="decrement" onClick={decrement}>
+                +
+            </button>
+            <button className="reset" onClick={reset}>
+                reset
+            </button>
+        </div>
+    )
+}