---
id: 5a24c314108439a4d403616e
title: Доступ до пропсів за допомогою this.props
challengeType: 6
forumTopicId: 301375
dashedName: access-props-using-this-props
---
# --description--
Останні декілька завдань охоплюють основні способи передачі пропсів до дочірніх компонентів. Проте, що, коли дочірній компонент, до якого здійснюється передача пропсу, це компонент класу ES6, а не функціональний компонент? Компонент класу ES6 використовує дещо інший метод доступу до пропсів.
Щоразу посилаючись на компонент класу в його межах, використовуйте ключове слово `this`. Щоб отримати доступ до пропсів в межах компоненту класу, ви спочатку надаєте код, який використовуєте, для доступу до нього за допомогою `this`. Наприклад, якщо компонент класу ES6 має пропс з назвою `data`, ви пишете `{this.props.data}` у JSX.
# --instructions--
Візуалізуйте екземпляр компоненту `Welcome` у батьківському компоненті `App`. Надайте `Welcome` проп `name` та призначте його значенням рядка. Отримайте доступ до `name` пропу в `strong` тегах у дочірньому компоненті `Welcome`.
# --hints--
Компонент `App` повинен відображати один елемент `div`.
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.children().type() === 'div';
})()
);
```
Дочірній елемент `App` має бути компонентом `Welcome`.
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.children().childAt(0).name() === 'Welcome'
);
})()
);
```
Компонент `Welcome` повинен мати проп з назвою `name`.
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.find('Welcome').props().name;
})()
);
```
Компонент `Welcome` повинен відображати рядок, який ви передаєте як `name` проп у `strong` тегах.
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.find('strong').text() ===
mockedComponent.find('Welcome').props().name
);
})()
);
```
# --seed--
## --after-user-code--
```jsx
ReactDOM.render(
Hello, !
{ /* Change code above this line */ }Hello, {this.props.name}!
{ /* Change code above this line */ }