React JS Tutorial: Handling Multiple Inputs 🎯

Welcome back to CodeYourCraft! Today, we're diving into a fascinating aspect of React JS: Handling Multiple Inputs. This lesson is perfect for both beginners and intermediates, so let's get started! 🚀

Understanding Input Fields 📝

Before we dive into handling multiple inputs, let's briefly review what an input field is. In React, <input> is an HTML element that allows users to enter data into a form.

jsx

<input type="text" />

This simple code creates a text input field. The type attribute determines the type of input field, such as text, number, email, and more.

Handling Multiple Inputs 💡

Now, let's discuss how to handle multiple input fields in a React app. We'll create a simple form where users can enter their name and email address.

Creating the Form 📝

First, let's create a new React component called Form.js.

jsx

import React, { Component } from 'react';

class Form extends Component {
  render() {
    return (
      <form>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" />

        <label htmlFor="email">Email:</label>
        <input type="email" id="email" />
      </form>
    );
  }
}

export default Form;

In the above code, we've created a simple form with two input fields: name and email. The label element helps users understand what information is expected in each input field.

Handling Form Submission 💡

Now, let's handle form submission and display the entered values. We'll create a new component called Result.js.

jsx

import React from 'react';

const Result = ({ name, email }) => {
  return (
    <div>
      <h2>Thank you, {name}!</h2>
      <p>Your email address is: {email}</p>
    </div>
  );
};

export default Result;

Our Result component expects name and email props. When these props are passed, the component renders a thank-you message and displays the entered values.

Handling Form State 💡

To handle form state, we'll use the state property and the setState method. We'll add a new component called FormWithState.js.

jsx

import React, { Component } from 'react';
import Form from './Form';
import Result from './Result';

class FormWithState extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div>
        <Form onChange={this.handleChange} />
        <Result {...this.state} />
        <button type="submit" onClick={this.handleSubmit}>
          Submit
        </button>
      </div>
    );
  }
}

export default FormWithState;

In the above code, we've added a state property to our FormWithState component to store the form values. The handleChange method updates the state whenever an input field is changed.

Putting It All Together 💡

Now that we have our individual components, let's put them together. Create a new React app and replace the App.js file with the following code:

jsx

import React from 'react';
import FormWithState from './FormWithState';

function App() {
  return <FormWithState />;
}

export default App;

Now, run your app, and you should see a form where you can enter your name and email address.

With this lesson, you now have a solid foundation for handling multiple input fields in your React apps. As you continue to learn and practice, you'll find yourself creating even more powerful and interactive forms! 🤓

Stay tuned for more lessons at CodeYourCraft. Happy coding! 🚀