2018-09-30 22:01:58 +00:00
---
id: 5a24c314108439a4d403616e
title: Access Props Using this.props
challengeType: 6
2019-08-05 16:17:33 +00:00
forumTopicId: 301375
2021-01-13 02:31:00 +00:00
dashedName: access-props-using-this-props
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
The last several challenges covered the basic ways to pass props to child components. But what if the child component that you're passing a prop to is an ES6 class component, rather than a stateless functional component? The ES6 class component uses a slightly different convention to access props.
2020-11-27 18:02:05 +00:00
Anytime you refer to a class component within itself, you use the `this` keyword. To access props within a class component, you preface the code that you use to access it with `this` . For example, if an ES6 class component has a prop called `data` , you write `{this.props.data}` in JSX.
# --instructions--
2021-10-25 22:08:10 +00:00
Render an instance of the `Welcome` component in the parent component `App` . Here, give `Welcome` a prop of `name` and assign it a value of a string. Within the child, `Welcome` , access the `name` prop within the `strong` tags.
2020-11-27 18:02:05 +00:00
# --hints--
2021-10-25 22:08:10 +00:00
The `App` component should return a single `div` element.
2020-11-27 18:02:05 +00:00
```js
assert(
(function () {
2021-10-25 22:08:10 +00:00
const mockedComponent = Enzyme.mount(React.createElement(App));
2020-11-27 18:02:05 +00:00
return mockedComponent.children().type() === 'div';
})()
);
```
2021-10-25 22:08:10 +00:00
The child of `App` should be the `Welcome` component.
2020-11-27 18:02:05 +00:00
```js
assert(
(function () {
2021-10-25 22:08:10 +00:00
const mockedComponent = Enzyme.mount(React.createElement(App));
2020-11-27 18:02:05 +00:00
return (
2021-10-25 22:08:10 +00:00
mockedComponent.children().childAt(0).name() === 'Welcome'
2020-11-27 18:02:05 +00:00
);
})()
);
```
2021-10-25 22:08:10 +00:00
The `Welcome` component should have a prop called `name` .
2020-11-27 18:02:05 +00:00
```js
assert(
(function () {
2021-10-25 22:08:10 +00:00
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.find('Welcome').props().name;
2020-11-27 18:02:05 +00:00
})()
);
```
2021-10-25 22:08:10 +00:00
The `Welcome` component should display the string you pass as the `name` prop within `strong` tags.
2020-11-27 18:02:05 +00:00
```js
assert(
(function () {
2021-10-25 22:08:10 +00:00
const mockedComponent = Enzyme.mount(React.createElement(App));
2020-11-27 18:02:05 +00:00
return (
mockedComponent.find('strong').text() ===
2021-10-25 22:08:10 +00:00
mockedComponent.find('Welcome').props().name
2020-11-27 18:02:05 +00:00
);
})()
);
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --after-user-code--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```jsx
2021-10-25 22:08:10 +00:00
ReactDOM.render(< App / > , document.getElementById('root'))
2020-11-27 18:02:05 +00:00
```
## --seed-contents--
2018-09-30 22:01:58 +00:00
```jsx
2021-10-25 22:08:10 +00:00
class App extends React.Component {
2018-09-30 22:01:58 +00:00
constructor(props) {
super(props);
}
render() {
return (
< div >
2020-09-15 16:53:25 +00:00
{ /* Change code below this line */ }
2021-10-25 22:08:10 +00:00
< Welcome / >
2020-09-15 16:53:25 +00:00
{ /* Change code above this line */ }
2018-09-30 22:01:58 +00:00
< / div >
);
}
};
2021-10-25 22:08:10 +00:00
class Welcome extends React.Component {
2018-09-30 22:01:58 +00:00
constructor(props) {
super(props);
}
render() {
return (
< div >
2020-09-15 16:53:25 +00:00
{ /* Change code below this line */ }
2021-10-25 22:08:10 +00:00
< p > Hello, < strong > < / strong > !< / p >
2020-09-15 16:53:25 +00:00
{ /* Change code above this line */ }
2018-09-30 22:01:58 +00:00
< / div >
);
}
};
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2020-07-13 16:58:50 +00:00
```jsx
2021-10-25 22:08:10 +00:00
class Welcome extends React.Component {
2018-09-30 22:01:58 +00:00
constructor(props) {
super(props);
}
render() {
return (
< div >
2021-10-25 22:08:10 +00:00
{ /* Change code below this line */ }
< p > Hello, < strong > {this.props.name}< / strong > !< / p >
{ /* Change code above this line */ }
2018-09-30 22:01:58 +00:00
< / div >
);
}
};
2021-10-25 22:08:10 +00:00
class App extends React.Component {
2018-09-30 22:01:58 +00:00
constructor(props) {
super(props);
}
render() {
return (
< div >
2021-10-25 22:08:10 +00:00
{ /* Change code below this line */ }
< Welcome name = "Quincy" / >
{ /* Change code above this line */ }
2018-09-30 22:01:58 +00:00
< / div >
);
}
};
```