coverts three class components to function components

src/App.js

@@ -1,41 +1,54 @@
-import React, { Component } from 'react';
-import AddContact from './AddContact';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './App.css';
+import React, { useState } from "react";
+import AddContact from "./AddContact";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./App.css";
 
-export default class App extends Component {
+// export default class App extends Component {
+//    constructor(props) {
+//       super(props);
+//       this.state = { newContactClicked: false };
+//       this.handleNewContact = this.handleNewContact.bind(this);
+//    }
 
-  constructor(props) {
-    super(props);
-    this.state = {newContactClicked: false};
-    this.handleNewContact = this.handleNewContact.bind(this);
-  }
+//    handleNewContact(event) {
+//       event.preventDefault();
+//       this.setState({ newContactClicked: true });
+//    }
 
-  handleNewContact(event) {
-    event.preventDefault();
-    this.setState({newContactClicked: true});
-  }
+export default function App() {
+   const [newContactClicked, setnewContact] = useState(false);
 
-  render() {
-    const newIsClicked = this.state.newContactClicked;
-    return (
+   const handleNewContact = (event) => {
+      event.preventDefault();
+      setnewContact(() => {
+         return { newContactClicked: true };
+      });
+   };
+
+   const newIsClicked = newContactClicked;
+   return (
       <div className="App">
-        <header className="App-header">
-          <h2 className="App-title">React Messaging App</h2>
-        </header>
-        <div className="row">
-          <div className="col-md-2 col-lg-2"/>
-          <div className="col-md-8 col-lg-8">
-            <div className="jumbotron">
-              <button type="button" onClick={this.handleNewContact} style={{'display': newIsClicked ? 'none' : 'block'}} className="btn btn-primary">New Contact
-              </button>
-              {newIsClicked && <AddContact />}
-              <pre>{JSON.stringify(this.state, null, 2)}</pre>
+         <header className="App-header">
+            <h2 className="App-title">React Messaging App</h2>
+         </header>
+         <div className="row">
+            <div className="col-md-2 col-lg-2" />
+            <div className="col-md-8 col-lg-8">
+               <div className="jumbotron">
+                  <button
+                     type="button"
+                     onClick={handleNewContact}
+                     style={{ display: newIsClicked ? "none" : "block" }}
+                     className="btn btn-primary"
+                  >
+                     New Contact
+                  </button>
+                  {newIsClicked && <AddContact />}
+                  {/* <pre>{JSON.stringify(this.state, null, 2)}</pre> */}
+               </div>
             </div>
-          </div>
-          <div className="col-md-2 col-lg-2"/>
-        </div>
+            <div className="col-md-2 col-lg-2" />
+         </div>
       </div>
-    );
-  }
+   );
 }

src/Chat.js

@@ -1,37 +1,62 @@
-import React, { Component } from 'react';
-import Messages from './Messages';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React, { useState } from "react";
+import Messages from "./Messages";
+import "bootstrap/dist/css/bootstrap.min.css";
 
-export default class Chat extends Component {
+// export default class Chat extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {message: 'Type a message', messages: [], sendClicked: false}
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
+// constructor(props) {
+//   super(props);
+//   this.state = {message: 'Type a message', messages: [], sendClicked: false}
+//   this.handleChange = this.handleChange.bind(this);
+//   this.handleSubmit = this.handleSubmit.bind(this);
+// }
 
-  handleChange(event) {
-    this.setState({message: event.target.value});
-  }
+export default function Chat() {
+   const [state, setState] = useState({
+      message: "Type a message",
+      messages: [],
+      sendClicked: false,
+   });
 
-  handleSubmit(event) {
-    event.preventDefault();
-    this.setState({message: '', messages: [...this.state.messages, this.state.message], sendClicked: true});
-  }
+   const handleChange = (event) => {
+      setState((todo) => {
+         return { message: event.target.value };
+      });
+   };
 
-  render() {
-    return (
+   const handleSubmit = (event) => {
+      event.preventDefault();
+      setState(() => {
+         return {
+            message: "",
+            messages: [...state.messages, state.message],
+            sendClicked: true,
+         };
+      });
+   };
+
+   return (
       <div className="jumbotron">
-        <Messages messages={this.state.messages} />
-        <nav className="navbar navbar-default">
-          <form>
-            <textarea type="text" className="form-control" value={this.state.message} onChange={this.handleChange} />
-            <button type="submit" value="Submit" onClick={this.handleSubmit} className="btn btn-primary send">Send</button>
-          </form>
-        </nav>
-        <pre>{JSON.stringify(this.state, null, 2)}</pre>
+         <Messages messages={state.messages} />
+         <nav className="navbar navbar-default">
+            <form>
+               <textarea
+                  type="text"
+                  className="form-control"
+                  value={state.message}
+                  onChange={handleChange}
+               />
+               <button
+                  type="submit"
+                  value="Submit"
+                  onClick={handleSubmit}
+                  className="btn btn-primary send"
+               >
+                  Send
+               </button>
+            </form>
+         </nav>
+         {/* <pre>{JSON.stringify(this.state, null, 2)}</pre> */}
       </div>
-    );
-  }
+   );
 }

src/Contacts.js

@@ -1,40 +1,52 @@
-import React, { useState } from 'react';
-import Chat from './Chat';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import React, { useState } from "react";
+import Chat from "./Chat";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 const Contacts = (props) => {
-  const [state,setState] = useState({
-      chatClicked:false,
-      chatListClicked:[]
-    });
+   const [state, setState] = useState({
+      chatClicked: false,
+      chatListClicked: [],
+   });
 
-  const handleChat = (event) => {
-    event.preventDefault();
-    setState(prevValue => {
-      return{
-        chatClicked: true,
-        chatListClicked:[...prevValue.chatListClicked, prevValue.chatClicked]
-      }
-    });
-  }
+   const handleChat = (event) => {
+      event.preventDefault();
+      setState((prevValue) => {
+         return {
+            chatClicked: true,
+            chatListClicked: [
+               ...prevValue.chatListClicked,
+               prevValue.chatClicked,
+            ],
+         };
+      });
+   };
 
-  return (
+   return (
       <div className="contacts">
-        <ul className="list-group contact-list">
-          {state.chatClicked && <Chat />}
-            {props.names.map((name, i) =>
-              <li className="list-group-item contact-item" key={i}>
-                <nav className="navbar navbar-default">
-                  <button type="button" className="btn btn-default contact-id">
-                    {name.match(/\b(\w)/g)}
-                  </button>
-                  <button type="button" className="btn btn-primary chat" onClick={handleChat}>Chat</button>
-                </nav>
-              </li>
-            )}
-        </ul>
-        <pre>{JSON.stringify(this.state, null, 2)}</pre>
+         <ul className="list-group contact-list">
+            {state.chatClicked && <Chat />}
+            {props.names.map((name, i) => (
+               <li className="list-group-item contact-item" key={i}>
+                  <nav className="navbar navbar-default">
+                     <button
+                        type="button"
+                        className="btn btn-default contact-id"
+                     >
+                        {name.match(/\b(\w)/g)}
+                     </button>
+                     <button
+                        type="button"
+                        className="btn btn-primary chat"
+                        onClick={handleChat}
+                     >
+                        Chat
+                     </button>
+                  </nav>
+               </li>
+            ))}
+         </ul>
+         {/* <pre>{JSON.stringify(this.state, null, 2)}</pre> */}
       </div>
-  );
-}
+   );
+};
 export default Contacts;