diff --git a/02/src/App.js b/02/src/App.js
index e32f1537..96cfda19 100644
--- a/02/src/App.js
+++ b/02/src/App.js
@@ -3,67 +3,66 @@ import './App.css';
 import Person from './Person/Person';
 
 
-/* // ## Functional code generated by creat-react-app ##
-// function App() {
-//   return (
-//     <div className="App">
-//       <h1>Hi, I'm a React App, I'm cute.</h1>
-//       <p>Created using Functional code</p>
-//       <button>Switch Name</button>
-//       <Person name="Yutsuo" ilvl="320"> Main Character </Person>
-//       <Person name="Schwarzgeist" ilvl="200"/>
-//       <Person name="Murom" ilvl="78"/>
-//     </div>
-//   );
-//   // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
-// }
+/*// ## Functional code generated by creat-react-app ##
+function App() {
+  return (
+    <div className="App">
+      <h1>Hi, I'm a React App, I'm cute.</h1>
+      <p>Created using Functional code</p>
+      <button>Switch Name</button>
+      <Person name="Yutsuo" ilvl="320"> Main Character </Person>
+      <Person name="Schwarzgeist" ilvl="200"/>
+      <Person name="Murom" ilvl="78"/>
+    </div>
+  );
+}
 */
 
-/* // ## Functional code created using ES6 (React Hooks) ##
-// const App = props => {
-//   const [charState, setCharState] = React.useState({
-//     character: [
-//       { name: 'Yutsuo', ilvl: 320 },
-//       { name: 'Schwarz', ilvl: 110 },
-//       { name: 'Murom', ilvl: 78 }
-//     ]
-//     // somethingElse: 'something something'
-//   });
-
-//   const [somethingElseState, setSomethingElseState] = React.useState('yadda yadda yadda');
-
-//   console.log(charState, somethingElseState);
-
-//   const switchNameHandler = () => {
-//     // console.log('\"CLICK\"');
-//     // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
-//     // Do not mutate state directly. Use setState()  react/no-direct-mutation-state
-//     setCharState({
-//       character: [
-//         { name: 'Yutsuo', ilvl: 320 },
-//         { name: 'Schwarzgeist', ilvl: 110 },
-//         { name: 'Murom', ilvl: 79 }
-//       ],
-//       somethingElse: charState.somethingElse
-//     });
-//   };
-
-//   return (
-//     <div className="App">
-//       <h1>Hi, I'm a React App, I'm cute.</h1>
-//       <p>Created using ES6 Functional code</p>
-//       <button onClick={switchNameHandler}>Switch Char</button>
-//       <Person name={charState.character[0].name} ilvl={charState.character[0].ilvl} />
-//       <Person name={charState.character[1].name} ilvl={charState.character[1].ilvl} />
-//       <Person name={charState.character[2].name} ilvl={charState.character[2].ilvl} />
-//       <br />
-//       <Person name="Yutsuo" ilvl="320"> Main Character </Person>
-//       <Person name="Schwarzgeist" ilvl="200"/>
-//       <Person name="Murom" ilvl="78"/>
-//     </div>
-//     );
-// // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
-// }
+/*// ## Functional code created using ES6 (React Hooks) ##
+const App = props => {
+  const [charState, setCharState] = React.useState({
+    character: [
+      { name: 'Yutsuo', ilvl: 320 },
+      { name: 'Schwarz', ilvl: 110 },
+      { name: 'Murom', ilvl: 78 }
+    ]
+    // somethingElse: 'something something'
+  });
+
+  const [somethingElseState, setSomethingElseState] = React.useState('yadda yadda yadda');
+
+  console.log(charState, somethingElseState);
+
+  const switchNameHandler = () => {
+    // console.log('\"CLICK\"');
+    // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
+    // Do not mutate state directly. Use setState()  react/no-direct-mutation-state
+    setCharState({
+      character: [
+        { name: 'Yutsuo', ilvl: 320 },
+        { name: 'Schwarzgeist', ilvl: 110 },
+        { name: 'Murom', ilvl: 79 }
+      ],
+      somethingElse: charState.somethingElse
+    });
+  };
+
+  return (
+    <div className="App">
+      <h1>Hi, I'm a React App, I'm cute.</h1>
+      <p>Created using ES6 Functional code</p>
+      <button onClick={switchNameHandler}>Switch Char</button>
+      <Person name={charState.character[0].name} ilvl={charState.character[0].ilvl} />
+      <Person name={charState.character[1].name} ilvl={charState.character[1].ilvl} />
+      <Person name={charState.character[2].name} ilvl={charState.character[2].ilvl} />
+      <br />
+      <Person name="Yutsuo" ilvl="320"> Main Character </Person>
+      <Person name="Schwarzgeist" ilvl="200"/>
+      <Person name="Murom" ilvl="78"/>
+    </div>
+    );
+// return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
+}
 */
 
 /* // ## What's behind each JSX tag ##
@@ -74,39 +73,53 @@ import Person from './Person/Person';
 
 // ## OOP code ##
 class App extends React.Component {
+  // The state should be IMMUTABLE, do not directly change it
   state = {
     character: [
-      { name: 'char1', ilvl: 0 },
-      { name: 'char2', ilvl: 0 },
-      { name: 'char3', ilvl: 0 }
+      { id: 1, name: 'char1', ilvl: '100' },
+      { id: 2, name: 'char2', ilvl: '110' },
+      { id: 3, name: 'char3', ilvl: '120' }
     ],
     somethingElse: 'something something',
     showOrHide: false
   }
 
 deleteCharacterHandler = (index) => {
-  // const characters = this.state.character.slice();
-  const characters = [...this.state.character];
-  characters.splice(index, 1);
-  this.setState({characters: characters});
+  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
+
+  characterCopy.splice(index, 1); // <- deletes the item from the copy of the state.character object
+  console.log('deleted character: ', this.state.character[index]);
+  this.setState({character: characterCopy}); //<- state alterations should be made by this function alone (setState())
 }
 
-  nameChangedHandler = (event) => {
-    this.setState({
-      character: [
-        { name: 'Yutsuo', ilvl: 320 },
-        { name: event.target.value, ilvl: 110 },
-        { name: 'Murom', ilvl: 79 }
-      ]
-    })
+  nameChangedHandler = (event, id) => {
+    // find the index during input event
+    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] };
+
+    // get the input event to change name
+    char.name = event.target.value;
+
+    // make a copy of the whole characters array prepare the changes there
+    const characters = [...this.state.character];
+    characters[charIndex] = char;
+
+    // change the state
+    this.setState( {character:characters} );
   }
 
   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})
   }
 
   render() {
+    //inline CSS directives
     const style = {
       backgroundColor: 'white',
       font: 'inherit',
@@ -122,7 +135,14 @@ deleteCharacterHandler = (index) => {
       persons = (
         <div>
           {this.state.character.map((char, index) => {
-            return <Person click={this.deleteCharacterHandler.bind(index)} name={char.name} age={char.ilvl} />
+            return (
+            <Person 
+            click={() => this.deleteCharacterHandler(index)} 
+            name={char.name} 
+            ilvl={char.ilvl} 
+            key={char.id} 
+            changed={(event) => this.nameChangedHandler(event, char.id)}
+            />)
           })}
         </div>
       )
@@ -133,9 +153,9 @@ deleteCharacterHandler = (index) => {
         <h1>Hi, I'm a React App, I'm cute.</h1>
         <p>Created using OOP code</p>
         <button 
-          style={style}
-          onClick={() => this.switchNameHandler()}>
-            Switch Char
+          style={style} // <- putting in the CSS directives set above
+          onClick={() => console.log('\"CLICK\"')} >
+          Click Me
         </button>
         <button
           style={style}
diff --git a/02/src/Person/Person.js b/02/src/Person/Person.js
index a3882b9b..1b0d68cb 100644
--- a/02/src/Person/Person.js
+++ b/02/src/Person/Person.js
@@ -4,9 +4,11 @@ import './Person.css';
 const person = (props) => {
     return (
         <div className="Person">
-            <p onClick={props.click}>I'm a {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
+            <p>I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
             <p>{props.children}</p>
             <input type="text" onChange={props.changed} defaultValue={props.name} />
+            <button onClick={props.click}>delete</button>
+            {console.log('props:', props)}
         </div>
     )
 };