update

02/src/App.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React from "react";
-import './App.css';
+import "./App.css";
-import Person from './Person/Person';
+import Person from "./Person/Person";
-
 
 /*// ## Functional code generated by creat-react-app ##
 function App() {
@@ -70,32 +69,33 @@ const App = props => {
 //   return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
 // }*/
 
-
 // ## OOP code ##
 class App extends React.Component {
   // The state should be IMMUTABLE, do not directly change it
   state = {
     character: [
-      { id: 1, name: 'char1', ilvl: '100' },
+      { id: 1, name: "char1", ilvl: "100" },
-      { id: 2, name: 'char2', ilvl: '110' },
+      { id: 2, name: "char2", ilvl: "110" },
-      { id: 3, name: 'char3', ilvl: '120' }
+      { id: 3, name: "char3", ilvl: "120" }
     ],
-    somethingElse: 'something something',
+    somethingElse: "something something",
     showOrHide: false
-  }
+  };
 
-deleteCharacterHandler = (index) => {
+  deleteCharacterHandler = index => {
-  const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it
+    const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it
-  // const characters = this.state.character.slice();  //<- this works, too, but use spread [...] instead
+    // const characters = this.state.character.slice();  //<- this works, too, but use spread [...] instead
 
-  characterCopy.splice(index, 1); // <- deletes the item from the copy of the state.character object
+    characterCopy.splice(index, 1); // <- deletes the item from the copy of the state.character object
-  console.log('deleted character: ', this.state.character[index]);
+    console.log("deleted character: ", this.state.character[index]);
-  this.setState({character: characterCopy}); //<- state alterations should be made by this function alone (setState())
+    this.setState({ character: characterCopy }); //<- state alterations should be made by this function alone (setState())
-}
+  };
 
   nameChangedHandler = (event, id) => {
     // find the index during input event
-    const charIndex = this.state.character.findIndex(c => {return c.id === id});
+    const charIndex = this.state.character.findIndex(c => {
+      return c.id === id;
+    });
 
     // copy the state item to manipulate it, state can't be directly changed.
     const char = { ...this.state.character[charIndex] };
@@ -108,25 +108,26 @@ deleteCharacterHandler = (index) => {
     characters[charIndex] = char;
 
     // change the state
-    this.setState( {character:characters} );
+    this.setState({ character: characters });
-  }
+  };
 
   showOrHide = () => {
-    const doesShow = this.state.showOrHide
+    const doesShow = this.state.showOrHide;
     // showOrHide was set to start false, but here when changing state it will
     // become the opposite. So if it's true it will be false and vice-versa
-    this.setState({showOrHide: !doesShow})
+    this.setState({ showOrHide: !doesShow });
-  }
+  };
 
   render() {
     //inline CSS directives
     const style = {
-      backgroundColor: 'white',
+      backgroundColor: "green",
-      font: 'inherit',
+      color: "white",
-      border: '1px solid blue',
+      font: "inherit",
-      padding: '8px',
+      border: "1px solid blue",
-      margin: '10px',
+      padding: "8px",
-      cursor: 'pointer'
+      margin: "10px",
+      cursor: "pointer"
     };
 
     let persons = null;
@@ -136,31 +137,33 @@ deleteCharacterHandler = (index) => {
         <div>
           {this.state.character.map((char, index) => {
             return (
-            <Person 
+              <Person
-            click={() => this.deleteCharacterHandler(index)} 
+                click={() => this.deleteCharacterHandler(index)}
-            name={char.name} 
+                name={char.name}
-            ilvl={char.ilvl} 
+                ilvl={char.ilvl}
-            key={char.id} 
+                key={char.id}
-            changed={(event) => this.nameChangedHandler(event, char.id)}
+                changed={event => this.nameChangedHandler(event, char.id)}
-            />)
+              />
+            );
           })}
         </div>
-      )
+      );
+
+      style.backgroundColor = "red";
     }
 
     return (
-      <div className='App'>
+      <div className="App">
         <h1>Hi, I'm a React App, I'm cute.</h1>
         <p>Created using OOP code</p>
-        <button 
+        <button
           style={style} // <- putting in the CSS directives set above
-          onClick={() => console.log('\"CLICK\"')} >
+          onClick={() => console.log('"CLICK"')}
+        >
           Click Me
         </button>
-        <button
+        <button style={style} onClick={this.showOrHide}>
-          style={style}
+          {this.state.showOrHide ? "HIDE IT" : "SHOW IT"}
-          onClick={this.showOrHide} >
-          {this.state.showOrHide ? 'HIDE IT' : 'SHOW IT'}
         </button>
         {persons}
       </div>

03/src/UserInput/UserInput.css

@@ -1,3 +1,3 @@
-.UserInput {
+.UserInput {
-    border: 2px solid red;
+    border: 2px solid red;
 }

docker-compose.yml

@@ -10,7 +10,7 @@ services:
       - $PWD/src:/usr/src/app/src
       - $PWD/public:/usr/src/app/public
     ports:
-      - "4000:3000"
+      - "5000:3000"
-      - "9229:9229"
+      # - "9229:9229"
     # command: ["echo",$PWD/src]
     command: ["npm", "start"]