Implement Search

Author: =

src/App.js

@@ -1,22 +1,8 @@
 import React from "react";
-import logo from "./logo.svg";
-import "./App.css";
+import Search from "./components/Search3";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-          Learn React
-        </a>
-        <button className="btn btn-large btn-success">Try me</button>
-      </header>
-    </div>
-  );
+  return <Search />;
 }
 
 export default App;

src/components/Search.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+class Search extends React.Component {
+  state= {
+    username: '',
+  }
+
+  handleUserNameChange = e => {
+    const  value = e.target.value;
+
+    this.setState({
+      username: value,
+    });
+  };
+
+  render() {
+    const { username } = this.state;
+
+    return <input value={username} onChange={this.handleUserNameChange} type="text" name="username" placeholder="Enter username" />;
+  }
+}
+
+export default Search;

src/components/Search2.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+class Search2 extends React.Component {
+  inputRef = React.createRef();
+
+  handleClick = () => {
+    const value = this.inputRef.current.value;
+
+    alert(`The value of the input field is ${value}`);
+  };
+
+  render() {
+    return (
+      <div>
+        <input ref={this.inputRef} type="text" name="username" placeholder="Enter username" />
+        <button onClick={this.handleClick}>Click Me</button>
+      </div>
+    );
+  }
+}
+
+export default Search2;

src/components/Search3.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+class Search3 extends React.Component {
+  handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      const value = e.target.value;
+      alert(`The value of the input field is ${value}`);
+    }
+  };
+
+  render() {
+    return <input onKeyDown={this.handleKeyDown} type="text" name="username" placeholder="Enter username" />;
+  }
+}
+
+export default Search3;