[Hacktoberfest]: Add content for React - Forms in React

[rakshixh]

📝 Issue Description

Add the following content for Forms in React under REACT

Controlled Components (Form Elements Controlled via State) Uncontrolled Components (Using Refs for Form Inputs) Form Validation (Manual Validation vs. Using Libraries) Handling Form Submissions

File you will be working on: src\content\docs\react\forms.mdx

🎯 Expected Outcome

The expected outcome is to add a well-documented and informative section under React that covers the following topics:

• Controlled Components: Explanation of controlled components in React, where form elements (such as inputs, selects, and textareas) are controlled via state, including examples of how state updates form values in real-time.

• Uncontrolled Components: Overview of uncontrolled components, where form inputs are managed by refs instead of state. This should include examples of how to use the ref attribute to access DOM elements directly for form inputs.

• Form Validation: Detailed explanation of form validation in React, comparing manual validation techniques (e.g., checking input values via state) with using libraries such as Formik, React Hook Form, or Yup. It should highlight the pros and cons of each approach.

• Handling Form Submissions: Instructions and best practices for handling form submissions in React, covering both controlled and uncontrolled components, and showing how to prevent default form submission behavior, collect form data, and send it to a back-end service or API.

The content should be written clearly, with examples where necessary, and provide value for developers who are either new to form handling in React or need to better understand the differences between controlled and uncontrolled components. Please don't make use of the AIs.

🔧 Solution Guidance (Optional)

• Make use of Astro Star Light Components

📋 Steps to Reproduce

• Navigate to src\content\docs\react\forms.mdx file in the repository.
• Add content for each of the 4 sections mentioned above.
• Ensure the content is formatted properly using MDX

🎃 Hacktoberfest Participation

✔️ This issue is tagged for Hacktoberfest. ✔️ PR should reference this issue and adhere to contribution guidelines.

👥 Contributors

If you are working on this issue, please comment below to let us know. Feel free to ask any questions! Don't forget to go through the CODE OF CONDUCT and follow the CONTRIBUTING guidelines.

---

Thank you for contributing to Hacktoberfest and helping improve this project!

[Shrey0610]

Hello, I have read the 'Contributing Guide' in the website and I am ready to go, can I make the changes? Please assign me the issue if you feel so.

[Shrey0610]

Hi, Can you please add the 'Hacktoberfest-accepted' and 'gssoc-extended' labels to this ?