Belajar ReactJS | Ep12. Menampilkan Form Submission

Introduction

This tutorial will guide you through the process of displaying form submissions in ReactJS. Understanding how to manage form data is essential for building interactive web applications. We will cover how to create a simple form, handle user input, and display submitted data.

Step 1: Set Up Your React Environment

Before diving into form submissions, ensure you have a React environment ready. If you haven't set it up yet, follow these steps:

1. Install Node.js if you haven't already.
2. Create a new React application using the command:

   npx create-react-app my-app
   

3. Navigate into your application directory:

   cd my-app
   

4. Start the development server:

   npm start
   

Step 2: Create a Basic Form Component

Next, you'll need to create a form where users can input data.

1. Create a new file called FormComponent.js in the src folder.

2. Add the following code to create a basic form:

   import React, { useState } from 'react';
   
   const FormComponent = () => {
       const [name, setName] = useState('');
       const [email, setEmail] = useState('');
   
       const handleSubmit = (event) => {
           event.preventDefault();
           // Handle form submission
           console.log('Submitted:', { name, email });
       };
   
       return (
           <form onSubmit={handleSubmit}>
               <input
                   type="text"
                   placeholder="Name"
                   value={name}
                   onChange={(e) => setName(e.target.value)}
               />
               <input
                   type="email"
                   placeholder="Email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
               />
               <button type="submit">Submit</button>
           </form>
       );
   };
   
   export default FormComponent;
   

Step 3: Integrate the Form Component

Now, integrate your newly created form component into your main application.

1. Open App.js.

2. Import the FormComponent and add it to the JSX:

   import React from 'react';
   import FormComponent from './FormComponent';
   
   function App() {
       return (
           <div className="App">
               <h1>Form Submission Example</h1>
               <FormComponent />
           </div>
       );
   }
   
   export default App;
   

Step 4: Display Submitted Data

After setting up the form, you’ll want to display the submitted data.

1. Modify the FormComponent to store submitted data in a state variable:

   const [submittedData, setSubmittedData] = useState([]);
   
   const handleSubmit = (event) => {
       event.preventDefault();
       const newSubmission = { name, email };
       setSubmittedData([...submittedData, newSubmission]);
       setName('');
       setEmail('');
   };
   

2. Add a section to display the submitted data:

   return (
       <div>
           <form onSubmit={handleSubmit}>
               {/* Input fields */}
           </form>
           <h2>Submitted Data</h2>
           <ul>
               {submittedData.map((data, index) => (
                   <li key={index}>{data.name} - {data.email}</li>
               ))}
           </ul>
       </div>
   );
   

Conclusion

In this tutorial, you learned how to create a basic form in ReactJS, handle user input, and display the submitted data. This foundational knowledge is crucial for building interactive applications.

Next steps could involve learning about form validation, using libraries like Formik for more complex forms, or integrating backend services to handle form submissions. Keep experimenting and enhancing your skills in ReactJS!