React components<\/h3>\n\n\n\n
Components are reusable chunks of code that are self-contained. They accomplish the same thing as JavaScript functions, except they act independently and return HTML.<\/p>\n\n\n\n
They can be related to Python\u2019s object-oriented programming (OOP) because both Python and JavaScript showcase the inheritance of data models.<\/p>\n\n\n\n
However, in OOP, the data isn\u2019t limited because any object can be created out of a Python class, unlike React components where data is limited to a set of other components. Also, React components can hold data for their own state, which is not the same for Python classes.<\/p>\n\n\n\n
In React, components can break a web application into separate parts with distinct functions. For example, you can create a component for the header of the web application and another for the navigation menu, reusing it on other pages of your application.<\/p>\n\n\n\n
Component architecture<\/h4>\n\n\n\n
In Python, there is no special hierarchy for how classes are used. However, React components work in a particular hierarchy.<\/p>\n\n\n\n
We know that we can call and render components in other components. The component is called the child component, while the one that calls the child component is called the parent component. This is called a parent-child relationship.<\/p>\n\n\n\n
You will learn later in this article how important knowing this architecture is to data transfer between components.<\/p>\n\n\n\n
Class components<\/h4>\n\n\n\n
A class component is a component that inherits the features from Below is an example of a class component:<\/p>\n\n\n\n In the class component above, we included the The component also requires the The equivalent of the class component in Python is as follows:<\/p>\n\n\n\n A functional component, like a class component, returns HTML<\/a> and operates similarly, but functional components can be constructed with significantly less code, are easier to grasp due to their simple syntax, and are favored in this tutorial:<\/p>\n\n\n\n Below is the Python equivalent:<\/p>\n\n\n\n Although the These are similar to the Python Jinja<\/a> templating engine.<\/p>\n\n\n\n There are a couple of key differences between JSX and HTML tags. The first is simply that the Secondly, in HTML, we use strings like the following to define inline styles:<\/p>\n\n\n\n However, in JSX, we utilize camel-cased objects:<\/p>\n\n\n\n And finally, variables can be added in our JSX markup to be rendered by wrapping a variable in:<\/p>\n\n\n\n Other React classes can be referenced in addition to HTML elements like There are three ways to style your React components<\/a>: using plain CSS, inline styles with JavaScript-style objects, or creating styled-components.<\/p>\n\n\n\n In the first way to style React components, which is using plain CSS, you must create a regular CSS file and import it into your React component. After importing it, you must add the class names for their corresponding HTML or JSX elements for the styles.<\/p>\n\n\n\n Below is an example for the CSS header style:<\/p>\n\n\n\n Then we have the header component:<\/p>\n\n\n\n In the second method, you must remove the imported CSS file and create an object that has a padding of It\u2019s worth noting that you don\u2019t need to provide pixels as the padding unit. By default, React transforms this into a string of pixels. If you want a certain unit, write it as a string. So, for example, if you wanted the padding to be a percentage, it would be The third way to style your components is by creating styled-components<\/a>. In this method, you must create styled objects, attach them, and wrap your JSX elements.<\/p>\n\n\n\n Styled-components is a development package for React and React Native. It allows you to use component-level styles in your apps and they integrate JavaScript with CSS using a technique known as CSS-in-JS.<\/p>\n\n\n\n Styled-components are built on tagged template literals, which implies that actual CSS code is written between backticks when styling components. Developers can reuse their CSS code from one project to the next as a result of this.<\/p>\n\n\n\n When utilizing styled-components, there is no need to map your built components to external CSS styles.<\/p>\n\n\n\n You can install styled-components using the npm command below:<\/p>\n\n\n\n Below is an example of how to use them in our React code:<\/p>\n\n\n\n You\u2019ll see that when constructing a React functional component, you can specify the name of the component with the variable type and its name, as in We imported A state object is integrated into React components. The state object<\/a> is where you keep the component\u2019s property values and the component rerenders when the state object changes:<\/p>\n\n\n\n In the code example above, we created a state To do this, we used the Hooks are functions that allow you to \u201chook\u201d into React features<\/a> like state and lifecycle functions. They are similar to decorators in Python that allow you to hook into a class or function and control its behavior.<\/p>\n\n\n\n To use Hooks, you must import them from the React library. They cannot be used with class components and may only be used at the top level of a component where the function attributes are declared, as seen in the code below:<\/p>\n\n\n\n As seen in the code above, the Hooks make managing states easier because they were built-in to carry out simple state management logic for you, which prevents you from wasting time on reinventing the wheel.<\/p>\n\n\n\n Some examples of Hooks are React props are similar to JavaScript function arguments and HTML attributes. They use the same syntax as HTML attributes to deliver props into a component:<\/p>\n\n\n\n Props are how you pass data between components<\/a> and can be passed down from a parent component to a child component:<\/p>\n\n\n\n The parent component here is You can also pass states as props between parent and child components:<\/p>\n\n\n\n <<\/p>\n\n\n\n In the code example above, we declare the state Then we can pass these states to the When working in React, you will need to handle states across components in a complicated application. This problem is solved by Redux<\/a>, a JavaScript package that aids in maintaining application states. Redux stores all of your states in a single source, and you can learn more about it in this tutorial<\/a>.<\/p>\n\n\n\n Webpack is a Javascript module bundler that allows you to keep dependencies as static files in your project so that you don\u2019t have to. Loaders are also included with Webpack to aid in executing certain activities inside your project<\/a>.<\/p>\n\n\n\n Learning server rendering will enable you to develop components on a server and render them as HTML in your browser; after all of the JavaScript modules download, React will take the stage.<\/p>\n\n\n\n This is one of React\u2019s best features, and it can be utilized with any backend technology. You can learn about server rendering in this article<\/a>.<\/p>\n\n\n\n Let\u2019s now build the Flask application<\/a> to manage a database and data requests, which will be the backend for our React application. This section will demonstrate how to build a Python API that works with React, then build a React application that makes requests from your IT.<\/p>\n\n\n\n To install Flask, run the command below:<\/p>\n\n\n\n Next, run the following command to create the Flask project:<\/p>\n\n\n\n We can now create an The Flask application will require you to install After installing the modules needed, import them and set them up. To do this, copy the code below in your Next, set up your database for the contact manager:<\/p>\n\n\n\n The In the code below, we can create, retrieve, and change endpoints for the contact manager application:<\/p>\n\n\n\n The Finally, the To begin building our React applications, we must first install React:<\/p>\n\n\n\n To create your React project, enter the command below:<\/p>\n\n\n\n In the React application you just created, locate the Next, create two folders named Next, let\u2019s import and render the In this section, we\u2019ll build the components that make up the contact manager application.<\/p>\n\n\n\n Create a new file called In the code above, we created the Then, by creating a Next, the When creating a Next, the This function also sets the And finally, the We can then pass the The By rendering each contact in a list using the map function to map the data in the The With that, our contact list currently looks like the list below:<\/p>\n\n\n\n The form component renders the form<\/a> used to submit data to our application. To do this, create a new file called Here, the The In And here\u2019s the final Add Contact form:<\/p>\n\n\n\n Finally, we have a working contact list that we can effectively add and delete contacts:<\/p>\n\n\n\n Both Python and React are excellent choices for creating a web application. When utilizing them, you\u2019ll notice that several features, such as Python\u2019s decorators and React Hooks, are identical.<\/p>\n\n\n\n Only a few changes in code syntax and data model\/transfer principles exist, such as how functions are defined and how data in a React component is managed differently than data in a Python class.<\/p>\n\n\n\n As a Python developer, learning React is important when building the server-side of your web applications. Thanks for reading, and happy coding!!<\/p>\n\n\n\n Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you\u2019re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket<\/a>. <\/a><\/a><\/p>\n\n\n\nReact.Component class<\/code>.<\/p>\n\n\n\nclass Header extends React.Component {\n render() {\n return <h2>Hello, I am a header!<\/h2>;\n }\n}<\/pre>\n\n\n\nextends React.Component<\/code>. This statement adds a React.Component<\/code> inheritance to the component, giving it access to React.Component<\/code> functionalities.<\/p>\n\n\n\nrender()<\/code> function, which returns HTML, to render the data in it.<\/p>\n\n\n\nclass MyComponent(Component):\n def __init__(self):\n super().__init__()\n\n def render(self):\n return \"Hello, I am a heder\" ;<\/pre>\n\n\n\n
Functional components<\/h4>\n\n\n\n
function Header() {\n return <h2>Hello, I am a header!<\/h2>;\n}<\/pre>\n\n\n\ndef Header() {\n return \"Hello, I am a header!\";\n}<\/pre>\n\n\n\nJSX<\/h4>\n\n\n\n
<h1><\/code> and <div><\/code> tags look the same as HTML tags, they are not. JSX is a syntactic extension to JavaScript<\/a> that contains these tags and was designed by the React team to enable inline HTML-like markup in JavaScript components.<\/p>\n\n\n\nclass<\/code><\/strong> keyword is now className<\/code>.<\/p>\n\n\n\n<h1 style=\"color: hotpink; font-size: 12px\">Hello<h1><\/pre>\n\n\n\n
<h1 style=\"color\": \"hotpink\", \"fontSize\": \"12px\"> Hello <\/h1><\/pre>\n\n\n\n
render() {\n var myText = 'Hello!';\n return (\n <h1>{myText}<\/h1>\n );\n}<\/pre>\n\n\n\n<h1><\/code> and <div><\/code>. In our src\/demo\/App.js<\/code>, for example, we render the ExampleComponent<\/code> component by accessing it as <ExampleComponent><\/code>.<\/p>\n\n\n\nStyling components<\/h4>\n\n\n\n
Using plain CSS to style<\/h5>\n\n\n\n
.header {\n padding: 60px;\n text-align: center;\n background: #1abc9c;\n color: white;\n font-size: 30px;\n}<\/pre>\n\n\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport '.\/Header.css';\n...\nexport default function Alert() {\n return(\n <div className=\"header\">\n <h2>React Header<\/h2>\n <\/div>\n )\n}<\/pre>\n\n\n\nUsing JavaScript-style objects<\/h5>\n\n\n\n
20<\/code> and pass the object to the div using the style attribute:<\/p>\n\n\n\nimport React from 'react';\n\nfunction Header() {\n const wrapper = {\n padding: 20\n };\n\n return(\n <div style={wrapper}>\n <h1\n Header.\n <\/h1>\n <\/div>\n )\n}\n\nexport default Header;<\/pre>\n\n\n\npadding: `20%`<\/code>.<\/p>\n\n\n\nUsing styled-components<\/h4>\n\n\n\n
npm i styled-components@4.1.3<\/pre>\n\n\n\n
import React from 'react';\nimport styled from 'styled-components';\n\n\/\/ Button component that'll render an <a> tag with some styles\nconst Button = styled.a`\n background-colour: teal;\n color: white;\n padding: 1rem 2rem;\n`\nconst App = () => {\n return (\n <Button>I am a button<\/Button>\n )\n}\nexport default App;<\/pre>\n\n\n\nconst Button<\/code><\/strong>.<\/p>\n\n\n\nstyled<\/code> above, which offers us the styled-components capabilities. Also, the a<\/code> after styled<\/code> signifies the anchor HTML element, <a><\/code>. When declaring a styled-component, you can use any HTML element like <div><\/code>, <h1><\/code>, or <p><\/code>.<\/p>\n\n\n\nStates<\/h3>\n\n\n\n
import React, {useState} from \"react\";\n \nconst MyComponent = () => {\n const [value, setValue] = useState(1);\n return (\n <div>\n <p>{value}<\/p>\n <button onClick={() => setValue((value + 1))}>Increment Value<\/button>\n <\/div>\n );\n};<\/pre>\n\n\n\nvalue<\/code>, which carries a value of 1,<\/code> and setValue<\/code>, which sets and updates the state value<\/code>.<\/p>\n\n\n\nuseState<\/code> Hook and setValue<\/code> to update the value<\/code>, adding 1<\/code> to it every time the button is clicked. This state will then update in the React DOM, which means the page doesn\u2019t need to reload for the change to render.<\/p>\n\n\n\nHooks<\/h3>\n\n\n\n
import React, { useState } from \"react\";\n\nfunction FavoriteColor() {\n const [color, setColor] = useState(\"red\");\n\n return (\n <>\n <h1>My favorite color is {color}!<\/h1>\n <\/>\n );\n}<\/pre>\n\n\n\nuseState<\/code> Hook is used at the top of the functional component, that is, before the return statement.<\/p>\n\n\n\nuseState<\/code> and useEffect<\/code>.<\/p>\n\n\n\nProps<\/h3>\n\n\n\n
<Header title=\"My react header\" \/>;<\/pre>\n\n\n\n
function House(props) {\n return <h2>I am a { props.type }!<\/h2>;\n}\n\nfunction Room() {\n return (\n <>\n <h1>Do you know my room number?<\/h1>\n <House type=\"duplex\" \/>\n <\/>\n );\n}<\/pre>\n\n\n\nRoom<\/code>, while House<\/code> is the child component. This is because the House<\/code> component was called in the Room<\/code> component, meaning a prop type<\/code> was passed between them.<\/p>\n\n\n\nPassing states as props<\/h4>\n\n\n\n
function House(props) {\n return <h2>I am a { props.type }!<\/h2>;\n}\n\nfunction Room() {\n const [type, setType] = useState(\"Duplex\");\n\n return (\n <>\n <h1>Do you know my room number?<\/h1>\n <House type={type} setType={setType} \/>\n <\/>\n );\n}<\/pre>\n\n\n\ntype<\/code>, which carries the value \"Duplex\"<\/code>, and setType<\/code>, which updates the state.<\/p>\n\n\n\nHouse<\/code> component as props. We also added the props argument to the House<\/code> component, which collects the states already passed. Finally, we render the data in the state using props.type<\/code>.<\/p>\n\n\n\nRedux<\/h3>\n\n\n\n
WebPack<\/h3>\n\n\n\n
Server rendering<\/h3>\n\n\n\n
Building the Flask and React applications<\/h2>\n\n\n\n
Flask installation<\/h3>\n\n\n\n
pip install flask<\/pre>\n\n\n\n
# create project directory\nmkdir flaskapp\n\ncd flaskapp<\/pre>\n\n\n\n
app.py<\/code> to add the Python code below:<\/p>\n\n\n\nfrom flask import Flask\n\napp = Flask(__name__)\n\n@app.route('\/ping')\ndef ping():\n return (\"hello world\")\n\n\nif __name__ == '__main__':\n app.run()<\/pre>\n\n\n\nSetting up the Flask application<\/h3>\n\n\n\n
flask_sqlalchemy<\/code> and flask_cors<\/code> using the commands below:<\/p>\n\n\n\npip install flask_sqlalchemy \npip install flask_cors<\/pre>\n\n\n\n
app.py<\/code> file:<\/p>\n\n\n\nimport os\nfrom flask import *\nfrom flask_cors import CORS\nfrom flask_sqlalchemy import SQLAlchemy\n\nfile_path = os.path.abspath(os.getcwd())+\"\\database.db\"\n \n\napp = Flask(__name__)\n\napp.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:\/\/\/'+file_path\napp.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False\ndb = SQLAlchemy()\ndb.init_app(app)\n\n@app.after_request\ndef after_request(response):\n response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')\n response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')\n response.headers.add('Access-Control-Allow-Credentials', 'true')\n return response<\/pre>\n\n\n\nclass ContactModel(db.Model):\n __tablename__ = \"table\"\n \n id = db.Column(db.Integer, primary_key=True)\n name = db.Column(db.String(), unique=True)\n \n def __init__(self, name):\n self.name = name\n\n def __repr__(self):\n return f\"{self.name}\"\n\n@app.before_first_request\ndef create_table():\n db.create_all()<\/pre>\n\n\n\nContactManager<\/code> model creates the database tables and the @app.before_first_request<\/code> decorator runs the build tables command that triggers the first time you use the Flask application.<\/p>\n\n\n\nBuilding the endpoints<\/h4>\n\n\n\n
@app.route('\/data\/create' , methods = ['GET','POST'])\ndef create():\n if request.method == 'GET':\n return jsonify({\"success\": True, \"message\": \"this is the create endpoint\"}), 201\n \n if request.method == 'POST':\n request_data = json.loads(request.data)\n name = request_data['name']\n contact = ContactModel(name=name)\n db.session.add(contact)\n db.session.commit()\n return jsonify({\"success\": True, \"message\": \"contact added successfully\"}), 201\n\ndef contact_serializer(contact):\n return {'name': contact.name}\n\n@app.route('\/data')\ndef retrieveDataList():\n return jsonify([*map(contact_serializer, ContactModel.query.all())])\n\n\n@app.route('\/data\/delete', methods=['GET','POST'])\ndef delete():\n request_data = json.loads(request.data)\n name = request_data['name']\n contact = ContactModel.query.filter_by(name=name).first()\n if request.method == 'POST':\n if contact:\n db.session.delete(contact)\n db.session.commit()\n return jsonify({\"success\": True, \"message\": \"Contact deleted successfully\"}), 201\n abort(404)\n \n return jsonify({\"success\": True}), 201<\/pre>\n\n\n\ncreate<\/code> endpoint collects data under a POST<\/code> request to create a contact in the database and the retrieve<\/code> endpoint gets all the data stored in the database.<\/p>\n\n\n\ndelete<\/code> endpoint receives data under a POST<\/code> request. Ensure to check if this data exists in the database before proceeding to delete it. These three endpoints will be very useful when building your React application.<\/p>\n\n\n\nBuilding the React application<\/h3>\n\n\n\n
npm install react react-dom --save<\/pre>\n\n\n\n
npx create-react-app contactmanager<\/pre>\n\n\n\n
Setting up the React application<\/h4>\n\n\n\n
package.json<\/code> file and add the API URL (http:\/\/127.0.0.1:5000\/<\/a>) to it as seen in the code sample below:<\/p>\n\n\n\n\"name\": \"contactmanager\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"proxy\":\"http:\/\/127.0.0.1:5000\/\",\n \"dependencies\": {\n \"@testing-library\/jest-dom\": \"^5.16.1\"\n....<\/pre>\n\n\n\nComponents<\/code> and Pages<\/code>. The Components<\/code> folder will carry all the application components while the Pages<\/code> folder will carry the page components.<\/p>\n\n\n\nThe
App.js<\/code> file<\/h4>\n\n\n\nContactPage<\/code> component that carries all the other components for this application. Copy and paste the code in your App.js<\/code> file:<\/p>\n\n\n\nimport logo from '.\/logo.svg';\nimport '.\/App.css';\nimport {ContactPage} from '.\/Pages\/ContactPage';\n\nfunction App() {\n return (\n <div className=\"App\">\n <ContactPage \/>\n <\/div>\n );\n}\n\nexport default App;<\/pre>\n\n\n\nBuilding the components<\/h4>\n\n\n\n
The
ContactPage<\/code> component<\/h4>\n\n\n\nContactPage.js<\/code> in the Pages<\/code> folder and copy and paste the code below into it:<\/p>\n\n\n\nimport React, {useState, useEffect} from 'react';\nimport {Card} from '..\/Components\/Card';\nimport {Form} from '..\/Components\/Form';\n\nexport const ContactPage = () => {\n const [contact, setContact] = useState([])\n const [addContact, setAddContact] = useState('')\n\n useEffect(()=> {\n fetch('\/data').then(response => {\n if (response.ok){\n return response.json()\n }\n }).then(data => setContact(data))\n }, [])\n\n const handleFormChange = (inputValue) => {\n setAddContact(inputValue)\n }\n\n const handleFormSubmit = () => {\n fetch('\/data\/create', {\n method: 'POST',\n body: JSON.stringify({\n name:addContact\n }),\n headers: {\n \"Content-type\": \"application\/json; charset=UTF-8\"\n }\n }).then(response => response.json()).then(message => \n {console.log(message);\n getLatestContacts();\n setAddContact('')\n })\n \n }\n\n const deleteContact = (name) => {\n fetch('\/data\/delete', {\n method: 'POST',\n body: JSON.stringify({\n name:name\n }),\n headers: {\n \"Content-type\": \"application\/json; charset=UTF-8\"\n }\n }).then(response => response.json()).then(message => {\n console.log(message);\n getLatestContacts()\n })\n \n }\n\n const getLatestContacts = () => {\n fetch('\/data').then(response => {\n if(response.ok){\n return response.json()\n }\n }).then(data => setContact(data))\n }\n\n \n return (\n <>\n <Form userInput={addContact} onFormChange = {handleFormChange} onFormSubmit={handleFormSubmit}\/>\n <Card listOfContacts={contact} onDelete={deleteContact}\/>\n <\/>\n )\n}<\/pre>\n\n\n\nContactPage<\/code> component and rendered the Card<\/code> and Form<\/code> components in it.<\/p>\n\n\n\ncontact<\/code> state and its setter, setContact<\/code>, this will carry the contacts\u2019 data. The addContact<\/code> state and its setter, setAddContact<\/code>, also carry the input for the data to add to the database.<\/p>\n\n\n\nuseEffect<\/code> Hook and the fetch<\/code> method to retrieve data from the \/data<\/code> endpoint in the Flask application, setting the retrieved data to the current contact<\/code> state. This ensures the retrieved data is the same as the data displayed on the application.<\/p>\n\n\n\nhandleFormChange<\/code> function, it sets the state of the addContact<\/code> state to the current data in the input field. We can then pass handleFormChange<\/code> as a prop to the Form<\/code> component.<\/p>\n\n\n\nhandleFormSubmit<\/code> function sends data to the create<\/code> endpoint in Flask to add new data to the database and clear the input field by setting the setAddContact<\/code> state to an empty string while getting the latest data after the creation of the new contact using the getLatestContacts<\/code> function.<\/p>\n\n\n\ncontact<\/code> state to the most current data after using the fetch<\/code> method to retrieve data. We can then pass handleFormSubmit<\/code> as a prop to the Form<\/code> component.<\/p>\n\n\n\ndeleteContact<\/code> function deletes contacts from the Flask database by making a request using the fetch<\/code> method to the data\/delete<\/strong><\/code> endpoint, followed by the getLatestContacts<\/code> function to get the new data after the delete action.<\/p>\n\n\n\ndeleteContact<\/code> function and the contact<\/code> state to the Card<\/code> component.<\/p>\n\n\n\nThe
Card<\/code> component<\/h4>\n\n\n\nCard<\/code> component renders all the data retrieved from the Flask application database. To use the Card<\/code> component, create a new file called Card.js<\/code> in the components folder and copy and paste the code below into it:<\/p>\n\n\n\nimport React from 'react';\n\nexport const Card = ({ listOfContacts, onDelete }) => {\n \n const handleDelete = (name) => {\n onDelete(name);\n }\n\n return(\n <>\n <h2>Contact List<\/h2>\n {listOfContacts.map(contact => {\n return(\n <ul key={contact.name}>\n <li>\n {contact.name} \n <button onClick={() => handleDelete(contact.name)}> x <\/button>\n <\/li>\n <\/ul>\n )\n })}\n <\/>\n ) \n}<\/pre>\n\n\n\nlistOfContact<\/code> prop passed from the ContactPage<\/code>, we can add a delete button to trigger the handleDelete<\/code> function and pass the name of the particular contact to be deleted.<\/p>\n\n\n\nhandleDelete<\/code> function then collects the name passed and calls the onDelete<\/code> prop that was passed from the ContactPage<\/code> component and carries out the same function as deleteContact<\/code>.<\/p>\n\n\n\n![\"Contact](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/contact-list.png\")
<\/figure><\/div>\n\n\n\nThe
Form<\/code> component<\/h4>\n\n\n\nForm.js<\/code> in the Components<\/code> folder and copy and paste the code below:<\/p>\n\n\n\nimport React from 'react';\n\nexport const Form = ({ userInput, onFormChange, onFormSubmit }) => {\n\n const handleChange = (event) => {\n onFormChange(event.target.value);\n }\n\n const handleSubmit = (event) => {\n event.preventDefault()\n onFormSubmit()\n }\n\n return(\n <>\n <h2>Add Contact<\/h2>\n <form onSubmit={handleSubmit}>\n <input type=\"text\" required value={userInput} onChange={handleChange}><\/input>\n <input type=\"submit\" ><\/input>\n <\/form>\n <\/>\n )\n}<\/pre>\n\n\n\nhandleSubmit<\/code> function is attached to the form, while the handleChange<\/code> function is attached to the name input element.<\/p>\n\n\n\nhandleChange<\/code> function triggers when we enter data into the HTML text input field, while the handleSubmit<\/code> function triggers when the form is submitted. This is done by calling the prop functions passed from the ContactPage<\/code> in handleChange<\/code> and handleSubmit<\/code>.<\/p>\n\n\n\nhandleChange<\/code>, we called the onFormChange.<\/code> prop, which performs the handleFormChange<\/code> function in the ContactPage<\/code> component, while in handleSubmit<\/code>, we called the onFormChange.<\/code> prop to perform the handleFormSubmit<\/code> function.<\/p>\n\n\n\n![\"Add](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/Add-contact-field.png\")
<\/figure><\/div>\n\n\n\nConclusion<\/h2>\n\n\n\n
![\"Final](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/01\/Final-contact-app-1.gif\")
<\/figure><\/div>\n\n\n\nFull visibility into production React apps<\/h2>\n\n\n\n