React JS Form Inputs (input, textarea, select)

Welcome back to CodeYourCraft! Today, we're diving into the world of form inputs in React JS. Form inputs are essential for gathering user data, and in this lesson, we'll cover the input, textarea, and select elements.

Why Form Inputs? 💡

Form inputs allow users to interact with your application, providing valuable data that can be processed and used to create dynamic and engaging user experiences. By mastering form inputs, you'll be able to build more interactive and functional web applications.

Input Element 🎯

The input element is the most basic form input type. It's used for single-line text input, such as names, email addresses, and passwords.

Creating an Input Field

Let's create a simple input field:

jsx

import React from 'react';

function App() {
  const [name, setName] = React.useState('');

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

  return (
    <div>
      <input type="text" value={name} onChange={handleInputChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

export default App;

📝 Note: In the code above, we use the useState hook to manage the name state, and an event handler handleInputChange to update the name whenever the input field's value changes.

Input Types 📝

Here are some common input types:

text: Single-line text input (default value)
email: Email input with email validation
password: Password input with asterisks instead of plain text
number: Numeric input
search: Search input with magnifying glass icon

Textarea Element 🎯

The textarea element is used for multi-line text input, such as comments or descriptions.

Creating a Textarea

Let's create a simple textarea:

jsx

import React, { useState } from 'react';

function App() {
  const [comment, setComment] = React.useState('');

  const handleTextareaChange = (event) => {
    setComment(event.target.value);
  }

  return (
    <div>
      <textarea value={comment} onChange={handleTextareaChange}></textarea>
      <p>Your comment is: {comment}</p>
    </div>
  );
}

export default App;

📝 Note: The textarea element behaves similarly to the input element, but it accepts multiple lines of text.

Select Element 🎯

The select element is used for dropdown menus, allowing users to select an option from a predefined list.

Creating a Select Menu

Let's create a simple select menu:

jsx

import React, { useState } from 'react';

function App() {
  const [selectedOption, setSelectedOption] = React.useState('');

  const handleSelectChange = (event) => {
    setSelectedOption(event.target.value);
  }

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  return (
    <div>
      <select value={selectedOption} onChange={handleSelectChange}>
        {options.map((option, index) => (
          <option key={index} value={option.value}>{option.label}</option>
        ))}
      </select>
      <p>Your selected option is: {selectedOption}</p>
    </div>
  );
}

export default App;

📝 Note: In the code above, we use an array of objects to store the option values and labels, and map over the array to create the option elements for the select menu.

Quiz

That's it for today! In the next lesson, we'll dive deeper into React JS form inputs and explore more advanced concepts, such as handling form submissions and form validation. Stay tuned and keep coding! 🤖 Happy learning! 🚀