Chapter 2 – Build a Contact Form Using React Props and Components
Walk you through how to leverage React components and props to develop a contact form. Basically the concept is likely similar to the Flask app Jinja, which can efficiently communicate with database and personalise the content in frontend.
In this piece, I would walk you through how to leverage React components and props to develop a contact form. Basically, the concept is likely similar to the Flask app Jinja, which can efficiently communicate with the database and personalize the content in front end.
- What are React Props and Components
- Create a function with a prop added to form placement in App main function
- Add the form default value in each component
- Claim the data type of props
- Full React Javascript of Contact Submission Form
What are React Props and Components
A component is an independent, reusable code block that divides the UI into smaller pieces.
Rather than building the whole UI under one single file, we can and should divide all the sections (marked with red) into smaller independent pieces. In other words, these are components.
Another important concept of components is how they communicate. React has a special object called a prop (which stands for the property) which we use to transport data from one component to another.
But be careful – props only transport data in a one-way flow (only from parent to child components). It is not possible with props to pass data from child to parent, or to components at the same level.
Create a function with a prop added to form placement in App main function
First thing first, we need to create a function that includes all logic of components and props added in the main App function which exports to the frontend by default.
function UserData(props) {
const value = props.text;
return (
<form method="POST">
<div>
<label for="text-form">{props.firstName}</label>
<br></br>
<input type="text" id="text-form" style={{ width: "500px", height: "70px" }} />
<br></br>
<label for="text-form">{props.lastName}</label>
<br></br>
<input type="text" id="text-form" style={{ width: "500px", height: "70px" }} />
<br></br>
<label for="text-form">{props.phone}</label>
<br></br>
<input type="number" id="text-form" style={{ width: "500px", height: "70px" }} />
<br></br>
<label for="text-form">{props.email}</label>
<br></br>
<input type="number" id="text-form" style={{ width: "500px", height: "70px" }} />
<br></br>
<label for="text-form">{props.message}</label>
<br></br>
<textarea type="number" id="text-form" style={{ width: "500px", height: "70px" }} />
</div>
<br></br>
<div>
<button type="submit">Submit</button>
</div>
</form>
);
}
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>
</header>
<body>
<UserData />
Add the form’s prop default value in each component
In the Userdata function, each label component has a prop instead to display related content. The approach aims to show the personalized content dynamically by interacting with the database. Being said that we need to set up a set of default values on a global level for the purpose to ensure content is readable.
UserData.defaultProps = {
number: 1,
firstName: "First Name",
lastName: "Last Name",
phone: "Phone Number",
email: "Email Address",
message: "Message",
}
Claim the data type of props
For better communicating with the database and avoiding bugs and errors, we need to claim data type in React JS. Here is the sample for this form.
UserData.propTypes = {
number: PropTypes.number,
firstName: PropTypes.string,
lastName: PropTypes.string,
phone: PropTypes.number,
email: PropTypes.string,
message: PropTypes.string
}
In fact, there is more data type that can be used, such as boolean, array, func, etc. For more details, please check out the React JS documentation.
Full React Javascript of Contact Submission Form
If you are interested in React JS chapter 2 – Build a contact form using React props and components, please subscribe to our newsletter by adding the message “chapter 2 + react js”. We would send you the script immediately to your mailbox.
I hope you enjoy reading React JS chapter 2 – Build a contact form using React props and components. If you did, please support us by doing one of the things listed below, because it always helps out our channel.
- Support and donate to my channel through PayPal (paypal.me/Easy2digital)
- Subscribe to my channel and turn on the notification bell Easy2Digital Youtube channel.
- Follow and like my page Easy2Digital Facebook page
- Share the article on your social network with the hashtag #easy2digital
- You sign up for our weekly newsletter to receive Easy2Digital latest articles, videos, and discount codes
- Subscribe to our monthly membership through Patreon to enjoy exclusive benefits (www.patreon.com/louisludigital)
