--- id: 5a24c314108439a4d4036172 title: Render State in the User Interface Another Way challengeType: 6 isRequired: false videoUrl: '' localeTitle: Показывать состояние в пользовательском интерфейсе другим способом --- ## Description
Существует еще один способ доступа к state в компоненте. В методе render() перед оператором return вы можете напрямую писать JavaScript. Например, вы можете объявлять функции, получать доступ к данным из state или props , выполнять вычисления по этим данным и т. Д. Затем вы можете назначить любые данные переменным, к которым у вас есть доступ в операторе return .
## Instructions
В MyComponent метода отрисовки, определит const называется name и установите его равным значению имени в компоненте state . Поскольку вы можете писать JavaScript непосредственно в этой части кода, вам не нужно вставлять эту ссылку в фигурные скобки. Затем в возвращаемом выражении выведите это значение в тег h1 используя name переменной. Помните, что в операторе return вам нужно использовать синтаксис JSX (фигурные скобки для JavaScript).
## Tests
```yml tests: - text: MyComponent должен иметь ключевое name со значением freeCodeCamp сохраненным в его состоянии. testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "MyComponent should have a key name with value freeCodeCamp stored in its state.");' - text: MyComponent должен отображать заголовок h1 заключенный в один div . testString: 'assert(/

.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "MyComponent should render an h1 header enclosed in a single div.");' - text: 'Представленный тег h1 должен содержать ссылку на {name} .' testString: 'getUserInput => assert(/

\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput("index")), "The rendered h1 tag should include a reference to {name}.");' - text: 'Представленный h1 заголовок должен содержать текст, отображаемый из состояния компонента.' testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "

TestName

", "The rendered h1 header should contain text rendered from the component's state."); };' ```

## Challenge Seed
```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'freeCodeCamp' } } render() { // change code below this line // change code above this line return (
{ /* change code below this line */ } { /* change code above this line */ }
); } }; ```
### After Test
```js console.info('after the test'); ```
## Solution
```js // solution required ```