Хуки в React: useState

Хук useState в React предоставляет возможность добавления состояния в функциональные компоненты. Вот как использовать useState для управления состоянием:

Установка начального состояния:

import React, { useState } from 'react';

const Counter = () => {
  // Деструктуризация массива, первый элемент - текущее состояние, второй - функция для его обновления
  const [count, setCount] = useState(0);

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

export default Counter;

В этом примере useState(0) устанавливает начальное значение состояния count равным 0. Функция setCount используется для обновления значения count.

Обновление состояния:

import React, { useState } from 'react';

const Example = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>You typed: {value}</p>
    </div>
  );
};

export default Example;

В этом примере хук useState('') используется для отслеживания введенного пользователем текста. Функция setValue вызывается при изменении ввода, чтобы обновить состояние value.

Использование состояния для управления видимостью:

import React, { useState } from 'react';

const ToggleComponent = () => {
  const [isVisible, setIsVisible] = useState(true);

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

  return (
    <div>
      {isVisible && <p>This is visible!</p>}
      <button onClick={toggleVisibility}>Toggle Visibility</button>
    </div>
  );
};

export default ToggleComponent;

В этом примере isVisible используется для управления видимостью текста. Кнопка Toggle Visibility изменяет состояние isVisible, что влияет на отображение или скрытие текста.

Хук useState предоставляет удобный способ добавления локального состояния в функциональные компоненты в React.