update current state for task

App1.css

@@ -0,0 +1,49 @@
+.App {
+  text-align: center;
+}
+body{
+  background-color: blueviolet;
+}
+
+h1{
+  position:relative; left:600px; top:0px
+}
+
+
+button {
+  background-color: rgb(15, 14, 14); 
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  position:relative; left:200px; top:0px;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+.delete{
+  color: red;
+  position:relative; left:0px; top:0px;
+  padding: 30px 60px;
+}
+
+input{
+  border: 3px solid #555;
+  width: 10%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+}
+.textArea{
+  width: 50%;
+  height: 150px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: #f8f8f8;
+  resize: none;
+}
+
+
+
+

taskCurrentState.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import "./App1.css";
+ class CurrentState extends Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      currentState : 'available'
+    }
+    this.changeCurrentState = this.changeCurrentState.bind(this);
+  }
+  changeCurrentState(){
+    const newState = document.getElementById('addInput');
+    if (newState === 'running' | 'finished'){
+      this.setState = newState;
+      alert('current state had been changed')
+    }
+    else{
+      alert('incorrect state')
+    }
+
+  }
+  render(){
+    return (
+      <div>
+        <input
+          type="text"
+          className="input"
+          id="addInput"
+          placeholder="Something that needs to be done..."
+        />
+        <button onClick={this.changeCurrentState}>
+          change current state
+        </button>
+      </div>
+    );
+  }
+}
+
+export default CurrentState;