У React props (скорочено від properties) — це потужний механізм для налаштування та передачі даних від батьківського до дочірнього компонента. Ця функція дозволяє створювати багаторазові та гнучкі компоненти в межах застосунку.

Передача props

Уявімо, що ми створюємо інтернет-магазин.

У цьому випадку маємо головний компонент App, і хочемо відображати інформацію про товар за допомогою компонента Product. Ми можемо передати назву товару та ціну як props від App до Product.

Ось як це виглядає на практиці:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

У компоненті App ми додаємо компонент Product і передаємо йому пропси: name зі значенням "Green iguana" та price зі значенням 579.

Отримання та використання пропсів

Тепер розглянемо компонент Product, який отримує ці пропси:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

У компоненті Product ми визначаємо один аргумент з назвою props. Усередині компонента можна отримати значення цих пропсів, використовуючи нотацію через крапку (.) із зазначенням імені властивості (наприклад, props.name та props.price).

Практичне застосування

Завдяки цьому підходу створено компонент Product, який можна багаторазово використовувати з різною інформацією про товари. Текстовий вміст кожного компонента Product легко налаштовується шляхом передачі різних пропсів.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Тепер є можливість відображати різні дані про товари, використовуючи один і той самий компонент Product.

Повний код застосунку: