Day 83 of React: Designing the “Contact Us” Section for our TiruRestaurant Website in React

In this tutorial, we will be creating a "Contact Us" section for our React tiruRestaurant website. This section will allow users to easily get in touch with us for any inquiries or feedback they may have. We will be using HTML tags along with React components to build this functionality.

Step 1: Create a new React component
First, let’s create a new React component for our Contact Us section. You can name this component whatever you like, but for this tutorial, we will name it ContactUs.js. In your src folder, create a new file named ContactUs.js and add the following code:

import React from 'react';

function ContactUs() {
  return (
    <div>
      <h2>Contact Us</h2>
      <p>Have a question or feedback? Get in touch with us!</p>
      {/* Add form here */}
    </div>
  );
}

export default ContactUs;

Step 2: Add form fields
Next, let’s add form fields to our ContactUs component so that users can enter their name, email, and message. Update the ContactUs component with the following code:

import React from 'react';

function ContactUs() {
  return (
    <div>
      <h2>Contact Us</h2>
      <p>Have a question or feedback? Get in touch with us!</p>
      <form>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" />

        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" />

        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message"></textarea>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default ContactUs;

Step 3: Styling the Contact Us form
You can add some CSS to style the form fields and make them more visually appealing. You can create a separate CSS file for your ContactUs component or add the styles directly in the component. Here’s an example of adding some basic styles to the form fields in the ContactUs component:

import React from 'react';
import './ContactUs.css';

function ContactUs() {
  return (
    <div>
      <h2>Contact Us</h2>
      <p>Have a question or feedback? Get in touch with us!</p>
      <form>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" />

        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" />

        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message"></textarea>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default ContactUs;

Step 4: Adding functionality to the form
Lastly, you can add functionality to the form to handle form submissions. You can use JavaScript or a library like Formik to handle form validation and submission. Here’s an example of adding a basic function to handle form submissions in the ContactUs component:

import React from 'react';
import './ContactUs.css';

function ContactUs() {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Add code to handle form submission here
    alert('Form submitted!');
  };

  return (
    <div>
      <h2>Contact Us</h2>
      <p>Have a question or feedback? Get in touch with us!</p>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" />

        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" />

        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message"></textarea>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default ContactUs;

That’s it! You have now successfully created a "Contact Us" section for your React tiruRestaurant website. Users can now easily get in touch with you through this section. Feel free to customize the form fields and styles to better fit the design of your website. Happy coding!