Что такое пропсы?

Повторное использование компонента — это удобно, но три одинаковые звезды не слишком полезны. Props позволяют передавать данные в компонент, поэтому каждая копия может быть уникальной:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

Здесь происходят две вещи:

• Передача: пропсы выглядят как атрибуты: name="Ada"
• Получение: компонент распаковывает их в своем списке параметров ({ name }) и использует их в JSX, как любую другую переменную

Один и тот же компонент, разные данные, разный результат: Hello, Ada! и Hello, Alan!. Пропсы — это способ, с помощью которого родители настраивают свои дочерние компоненты.