update class component

examples/react-concepts/src/App.css

@@ -1,5 +1,5 @@
 .App {
   background-color: bisque;
   min-height: 100vh;
-  font-size: 1.5rem;
+  font-size: 1rem;
 }

examples/react-concepts/src/App.js

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
+
 import Input from "./components/class/Input";
+
 import "./App.css";
 
 function App() {
-  const [state, setState] = useState("default");
-
-
+  const [text, setText] = useState("default");
+  const [name, setName] = useState("default");
 
   return (
     <div
@@ -15,10 +16,13 @@ function App() {
         textAlign: "center",
       }}
     >
-
-
-      <Input />
-      <h1>{state}</h1>
+      Text: <Input placeholder="Escriba su nombre" setValue={setText} />
+      <br />
+      Nombre: <Input placeholder="Escriba su nombre" setValue={setName} />
+      {/*Apellido: <Input placeholder="Escriba su apellido" />
+      Edad: <Input placeholder="Escriba su apellido" type="number" /> */}
+      <h2>Text: {text}</h2>
+      <h2>Nombre: {name}</h2>
     </div>
   );
 }

examples/react-concepts/src/components/class/Input.jsx

@@ -1,17 +1,44 @@
 import React, { Component } from "react";
 
 class Input extends Component {
-  constructor() {}
-  //state = "default";
+  constructor(props) {
+    super(props);
+    this.state = { value: "", counter: 1 };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    //Actualizae estado de
+    this.setState((state, props) => {
+      return { ...state, value: event.target.value };
+    });
 
-  /*function handleChange(event) {
-    console.log(event.target.value);
-    //setState(event.target.value);
-    //console.log("state", state);
-  }*/
+    this.props.setValue(event.target.value);
+  }
+
+  componentDidMount() {
+    console.log(
+      "Ya se renderizó el componente!! -- Hacer llamado se side effects (APIS)"
+    );
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    console.log("componentDidUpdate", prevProps, prevState, snapshot);
+  }
+
+  componentWillUnmount() {
+    console.log("componentWillUnmount...");
+  }
 
   render() {
-    return <input value={this.state} type="text" onChange={handleChange} />;
+    return (
+      <input
+        placeholder={this.props.placeholder}
+        value={this.state.value}
+        type={this.props.type || "text"}
+        onChange={this.handleChange}
+      />
+    );
   }
 }