04-ongoing

04/src/App.js

@@ -1,12 +1,13 @@
 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 => {
@@ -15,17 +16,27 @@ class App extends React.Component {
     this.setState({ message: newMessage });
   };
 
+  handleDelete(index) {
+    let newSplited = [...this.state.splited]
+  }
+
   render() {
     const input = (
       // <input onChange={this.handleChange.bind(this)} /> // --> this works
       <input onChange={event => this.handleChange(event)} /> // --> but this is better
     );
 
+    let splited = this.state.message.split("");
+    console.log("splited", splited);
+
     return (
       <div className="App">
         <h1>{this.state.message}</h1>
         {input}
-        <Validation/>
+        <Validation length={this.state.message.length} />
+        {splited.map((item, index) => {
+          return <Char key={index} string={item} />
+        })}
       </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,13 +4,16 @@ class Validation extends React.Component {
   constructor(props) {
     super(props);
     console.log("Validation:", props);
-    // console.log(this.props.message.lenght);
   }
 
   render() {
       return(
           <div>
-              <p>validation placeholder</p>
+            {this.props.length <= 5 ? 
+              <p>good enough (length: {this.props.length})</p>
+              :
+              <p>TOO MUCH, STAHP (length: {this.props.length})</p>
+            }
           </div>
       )
   }