React — State

What is State?

State is a built-in React object that contains data or information about the component. It can change over time.

useState Hook

import { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

Multiple State Variables

function Form() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [age, setAge] = useState(0);

    return (
        <form>
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />
            <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />
            <input
                type="number"
                value={age}
                onChange={(e) => setAge(e.target.value)}
            />
        </form>
    );
}

Updating State

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

    // Correct way to update state
    const increment = () => {
        setCount(prevCount => prevCount + 1);
    };

    // Wrong way (direct mutation)
    const wrongIncrement = () => {
        count = count + 1; // Don't do this!
    };

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

State with Objects

function UserForm() {
    const [user, setUser] = useState({
        name: '',
        email: '',
        age: 0
    });

    const handleChange = (e) => {
        setUser({
            ...user,
            [e.target.name]: e.target.value
        });
    };

    return (
        <form>
            <input
                name="name"
                value={user.name}
                onChange={handleChange}
            />
            <input
                name="email"
                value={user.email}
                onChange={handleChange}
            />
            <input
                name="age"
                type="number"
                value={user.age}
                onChange={handleChange}
            />
        </form>
    );
}

State Examples

// Todo list with state
function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState('');

    const addTodo = () => {
        if (input.trim()) {
            setTodos([...todos, { id: Date.now(), text: input }]);
            setInput('');
        }
    };

    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    return (
        <div>
            <input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && addTodo()}
            />
            <button onClick={addTodo}>Add</button>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={() => deleteTodo(todo.id)}>
                            Delete
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Mini Practice

Write React code that:

1. Uses useState to manage state
2. Updates state with setter function
3. Manages multiple state variables
4. Creates a todo list with state

Up Next

Next: Learn about Events.