Merge branch 'master' of https://git.mumech.com/yutsuo/udemy-react

02/src/App.js

@@ -72,6 +72,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

@@ -1,31 +1,57 @@
 import React from "react";
 import "./App.css";
 
-import Validation from './Validation'
+import Validation from "./Validation";
+import Char from "./Char";
 
 class App extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { message: "Sup!" };
+    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 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("");
+
+    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/>
+        <Validation length={this.state.message.length} />
+        {charList}
       </div>
     );
   }

04/src/Char.css

@@ -0,0 +1,7 @@
+.Char {
+  display: inline-block;
+  padding: 16px;
+  text-align: center;
+  margin: 16px;
+  border: 1px solid black;
+}

04/src/Char.js

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Char.css";
+
+class Char extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+  return <div className="Char" onClick={this.props.click} >{this.props.string}</div>;
+  }
+}
+
+export default Char;

04/src/Validation.js

@@ -4,15 +4,19 @@ class Validation extends React.Component {
   constructor(props) {
     super(props);
     console.log("Validation:", props);
-    // console.log(this.props.message.lenght);
+  }
+
+  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>
-              <p>validation placeholder</p>
-          </div>
-      )
+    return <div>{this.validation()}</div>;
   }
 }