04-ongoing

02/src/App.js

@@ -74,6 +74,7 @@ const App = props => {
 // ## OOP code ##
 class App extends React.Component {
   // The state should be IMMUTABLE, do not directly change it
+  // If you need to change it, use the setState() method.
   state = {
     character: [
       { id: 1, name: 'char1', ilvl: '100' },

04/src/App.js

@@ -10,33 +10,48 @@ class App extends React.Component {
     this.state = { message: "" };
   }
 
-  handleChange = event => {
-    console.log(event.target.value);
+  // handleChange = event => {
+  //   let newMessage = event.target.value;
+  //   this.setState({ message: newMessage });
+  // };
+
+  handleChange(event) {
     let newMessage = event.target.value;
     this.setState({ message: newMessage });
   };
 
   handleDelete(index) {
-    let newSplited = [...this.state.splited]
+    let newMessage = [...this.state.message];
+    let newSplited = newMessage.toString().split(",");
+    newSplited.splice(index, 1);
+    newMessage = newSplited.join("");
+    this.setState({ message: newMessage });
   }
 
   render() {
     const input = (
-      // <input onChange={this.handleChange.bind(this)} /> // --> this works
-      <input onChange={event => this.handleChange(event)} /> // --> but this is better
+      // <input onChange={this.handleChange.bind(this)} value={this.state.message} /> // --> this works
+      <input type="text" onChange={event => this.handleChange(event)} value={this.state.message} /> // --> but this is better
     );
 
     let splited = this.state.message.split("");
-    console.log("splited", splited);
+
+    const charList = splited.map((item, index) => {
+      return (
+        <Char
+          key={index}
+          string={item}
+          click={() => this.handleDelete(index)}
+        />
+      );
+    });
 
     return (
       <div className="App">
         <h1>{this.state.message}</h1>
         {input}
         <Validation length={this.state.message.length} />
-        {splited.map((item, index) => {
-          return <Char key={index} string={item} />
-        })}
+        {charList}
       </div>
     );
   }

04/src/Validation.js

@@ -6,16 +6,17 @@ class Validation extends React.Component {
     console.log("Validation:", props);
   }
 
+  validation() {
+    let validationMessage = <p>good enough</p>;
+    if (this.props.length >= 5) {
+      validationMessage = <p>TOO MUCH, STAHP</p>;
+      return validationMessage;
+    }
+    return validationMessage;
+  }
+
   render() {
-      return(
-          <div>
-            {this.props.length <= 5 ? 
-              <p>good enough (length: {this.props.length})</p>
-              :
-              <p>TOO MUCH, STAHP (length: {this.props.length})</p>
-            }
-          </div>
-      )
+    return <div>{this.validation()}</div>;
   }
 }