Uncontrolled Components in React JS 🎯

Welcome to our deep dive into Uncontrolled Components in React JS! 🚀

By the end of this tutorial, you'll have a solid understanding of uncontrolled components, their importance, and how to use them in your React projects. Let's get started! 💡

What are Uncontrolled Components? 📝

In React, components can be either controlled or uncontrolled, depending on how they manage their internal state. Uncontrolled components rely on the DOM for managing their state, while controlled components have their state managed by React itself.

Uncontrolled components are often simpler to implement because they don't require the setup of a controlled component, which involves handling changes to the state and synchronizing it with the component's value.

Creating an Uncontrolled Component 🎯

To create an uncontrolled component, we'll use a simple form as an example.

jsx

import React from 'react';

class UncontrolledForm extends React.Component {
  render() {
    return (
      <form>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UncontrolledForm;

In this example, we've created a simple form without managing its state. The input field relies on the browser's default behavior for managing its state, making it an uncontrolled component.

Form Values in Uncontrolled Components 📝

Because uncontrolled components rely on the DOM for managing their state, you can't directly access their values in the component's state. To work around this, you can use the ref API to access the DOM element and retrieve the component's value.

Here's an example of accessing the form's value in an uncontrolled component:

jsx

import React, { useState } from 'react';

class UncontrolledForm extends React.Component {
  formRef = React.createRef();

  handleSubmit = (e) => {
    e.preventDefault();
    const formValue = this.formRef.current.querySelector('input[name="name"]').value;
    console.log(formValue);
  }

  render() {
    return (
      <form ref={this.formRef} onSubmit={this.handleSubmit}>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UncontrolledForm;

In this updated example, we've added a handleSubmit method and used the ref API to create a reference to the form. We can then access the form's input field and retrieve its value when the form is submitted.

When to Use Uncontrolled Components 💡

Uncontrolled components are useful in scenarios where you don't need to maintain the component's state or perform complex validations. They're also ideal for components that are part of a larger controlled form, where the form manages the state of its child components.

Quiz 📝

That's it for this tutorial on Uncontrolled Components in React JS! 🎉 We hope you've enjoyed learning about uncontrolled components and how to use them in your projects. Stay tuned for more exciting tutorials on CodeYourCraft! 🚀