Handling State with useState in React

Introduction

Handling state in React is crucial for creating interactive applications. The useState hook simplifies state management in functional components, allowing you to store and update values seamlessly. In this guide, we’ll explore three practical examples of handling state with useState in React to help you understand its usage better.

Example 1: Toggle Visibility

Use Case

Imagine a scenario where you want to show or hide a piece of content, like a paragraph or an image, when a button is clicked. This is a common feature in many applications, such as FAQs or dropdown menus.

import React, { useState } from 'react';

const ToggleVisibility = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleContent = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleContent}>Toggle Content</button>
      {isVisible && <p>This is the content to show or hide.</p>}
    </div>
  );
};

export default ToggleVisibility;

Notes

• The isVisible state is initialized to false, meaning the content is hidden initially.
• The button toggles the visibility state, updating the UI accordingly.

Example 2: Managing Form Inputs

Use Case

Forms are essential for gathering user input. This example demonstrates how to manage form inputs using useState. Let’s create a simple login form that captures a username and password.

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Username: \({username}, Password: }\(password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      </div>
      <div>
        <label>Password:</label>
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </div>
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

Notes

• The username and password states are updated with user input through the onChange event handler.
• The form submission triggers an alert displaying the entered credentials. In real applications, you’d send this data to a server instead.

Example 3: Counter with Increment and Decrement

Use Case

A counter is a classic example of state management. This functionality is often used in shopping carts or for tracking items. Let’s create a simple counter component that allows users to increment and decrement a value.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Notes

• The count state starts at 0, representing the initial value of the counter.
• Each button updates the state accordingly, demonstrating how useState can manage numerical values effectively.

Conclusion

These examples of handling state with useState in React showcase the versatility of this powerful hook. Whether toggling visibility, managing form inputs, or creating a simple counter, useState is an essential tool for any React developer. Happy coding!