freeCodeCamp/curriculum/challenges/ukrainian/03-front-end-development-libraries/react/create-a-stateful-component.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036170	Створити компонент Stateful	6	301391	create-a-stateful-component

--description--

Однією із найважливіших тем у React є state. Стан складається з будь-яких даних, про які потрібно знати, і які можуть з часом зазнавати змін. Ви хочете, щоб ваші програми відповіли на зміни стану і представили оновлений інтерфейс, коли це необхідно. React пропонує чудове рішення для управління станом сучасних веб-додатків.

Ви створюєте стан в компоненті React, вказавши про властивість state для класу компоненту з його constructor. Це ініціалізує компонент з state, коли він створюється. Властивість state повинна бути встановлена на JavaScript object. Іншими словами, це виглядає так:

this.state = {

}

У вас є доступ до предмета state протягом усього життя вашого компонента. Ви можете його оновити, візуалізувати його в своєму інтерфейсі, і передати його як протоколи до споріднених документів. Об'єкт state може бути як простим, так і складним, в залежності від того, який вам потрібен. Зверніть увагу, ви повинні створити клас компонентів, розширивши React.Component для того, щоб створити такий як цей state.

--instructions--

У кодовому редакторі є компонент, який намагається візуалізувати властивість name з його state. Однак, state є невизначеним. Ініціалізуйте компонент з state в constructor і призначте ваше ім'я до властивості name.

--hints--

StatefulComponent повинен існувати і візуалізуватися.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    return mockedComponent.find('StatefulComponent').length === 1;
  })()
);

StatefulComponent повинен візуалізувати div і h1 елемент.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    return (
      mockedComponent.find('div').length === 1 &&
      mockedComponent.find('h1').length === 1
    );
  })()
);

Стан StatefulComponent повинен бути ініціалізований з властивістю name, яка встановлена на рядок.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    const initialState = mockedComponent.state();
    return (
      typeof initialState === 'object' && typeof initialState.name === 'string'
    );
  })()
);

Значення name у стані StatefulComponent повинне візуалізувати елемент h1.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    const initialState = mockedComponent.state();
    return mockedComponent.find('h1').text() === initialState.name;
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<StatefulComponent />, document.getElementById('root'))

--seed-contents--

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    // Only change code below this line

    // Only change code above this line
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

--solutions--

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp!'
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};