Передача Даних Через Props

Компоненти часто повинні відображати різні дані залежно від місця їх використання. У React дані передаються в компоненти за допомогою props. Props — це вхідні дані для компонента. Вони дозволяють передавати дані від батьківського компонента до дочірнього компонента та керувати тим, що відображає компонент.

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

Нижче наведено простий приклад передачі даних у компонент за допомогою props:

function Greeting(props) {
  return <h2>Hello, {props.name}</h2>;
}

function App() {
  return <Greeting name="Olivia" />;
}

У цьому прикладі компонент App передає значення "Olivia" до компонента Greeting за допомогою пропса з назвою name. Компонент Greeting отримує ці дані та відображає їх в інтерфейсі.