React JS Tutorial: Working with the `onChange` Event 🎯

Welcome back to CodeYourCraft! Today, we're diving into the fascinating world of React JS by exploring the onChange event. This event is crucial for handling user input, making our applications interactive and user-friendly.

By the end of this lesson, you'll be able to create dynamic forms, input fields, and more with confidence! 🚀

Understanding the `onChange` Event 📝

In React JS, the onChange event is triggered when a user interacts with an input field, such as a text box or a checkbox. This event allows us to update the state of our components based on user input.

Let's create a simple example to understand this better:

jsx

import React, { useState } from 'react';

function MyForm() {
  const [userName, setUserName] = useState('');

  const handleUserNameChange = (event) => {
    setUserName(event.target.value);
  }

  return (
    <form>
      <label>
        Name:
        <input type="text" value={userName} onChange={handleUserNameChange} />
      </label>
      <p>Hello, {userName}!</p>
    </form>
  );
}

export default MyForm;

💡 Pro Tip: In this example, we're using the useState hook to manage our component's state. The userName state is updated every time the onChange event is triggered, making our form dynamic!

Handling Multiple Input Fields 📝

Managing multiple input fields with the onChange event is straightforward. Let's create a form with two input fields: one for the user's name and one for their email address.

jsx

import React, { useState } from 'react';

function MyForm() {
  const [userName, setUserName] = useState('');
  const [userEmail, setUserEmail] = useState('');

  const handleUserNameChange = (event) => {
    setUserName(event.target.value);
  }

  const handleUserEmailChange = (event) => {
    setUserEmail(event.target.value);
  }

  return (
    <form>
      <label>
        Name:
        <input type="text" value={userName} onChange={handleUserNameChange} />
      </label>
      <label>
        Email:
        <input type="email" value={userEmail} onChange={handleUserEmailChange} />
      </label>
      <p>Hello, {userName}! Your email is {userEmail}.</p>
    </form>
  );
}

export default MyForm;

Now, every time a user interacts with either the name or email input field, the respective state will be updated! 🎉

Bonus: Creating Controlled Forms 💡

Controlled components are essential when dealing with forms in React JS. With controlled components, the form's value is managed by the React component itself, making it easier to handle form submissions and validate user input.

To create a controlled form, simply assign the component's state to the form's value and handle form submissions using a form event like onSubmit.

jsx

import React, { useState } from 'react';

function MyForm() {
  const [userName, setUserName] = useState('');
  const [userEmail, setUserEmail] = useState('');
  const [formSubmitted, setFormSubmitted] = useState(false);

  const handleUserNameChange = (event) => {
    setUserName(event.target.value);
  }

  const handleUserEmailChange = (event) => {
    setUserEmail(event.target.value);
  }

  const handleFormSubmit = (event) => {
    event.preventDefault();
    setFormSubmitted(true);
    console.log(`Name: ${userName}, Email: ${userEmail}`);
  }

  return (
    <form onSubmit={handleFormSubmit}>
      <label>
        Name:
        <input type="text" value={userName} onChange={handleUserNameChange} />
      </label>
      <label>
        Email:
        <input type="email" value={userEmail} onChange={handleUserEmailChange} />
      </label>
      {formSubmitted && <p>Thank you for your submission!</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

In this example, the form's value is controlled by the component's state, and the form is submitted when the user clicks the "Submit" button. The form submission logs the user's name and email address to the console.

Putting it All Together 📝

Now that we've covered the basics, let's put everything we've learned into action! We'll create a signup form with a name input field, an email input field, and a password input field. When the user submits the form, we'll log their details to the console.

jsx

import React, { useState } from 'react';

function SignupForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [formSubmitted, setFormSubmitted] = useState(false);

  const handleNameChange = (event) => {
    setName(event.target.value);
  }

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  }

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  }

  const handleFormSubmit = (event) => {
    event.preventDefault();
    setFormSubmitted(true);
    console.log(`Name: ${name}, Email: ${email}, Password: ${password}`);
  }

  return (
    <form onSubmit={handleFormSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <label>
        Password:
        <input type="password" value={password} onChange={handlePasswordChange} />
      </label>
      {formSubmitted && <p>Thank you for signing up!</p>}
      <button type="submit">Sign Up</button>
    </form>
  );
}

export default SignupForm;

Congratulations! You've now mastered working with the onChange event in React JS! 🎉

React JS Tutorial: Working with the `onChange` Event 🎯

React JS Tutorial: Working with the onChange Event 🎯

Understanding the onChange Event 📝

Handling Multiple Input Fields 📝

Bonus: Creating Controlled Forms 💡

Putting it All Together 📝

Quiz 📝

React JS Tutorial: Working with the `onChange` Event 🎯

Understanding the `onChange` Event 📝