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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036170	Eine zustandsabhängige Komponente erstellen	6	301391	create-a-stateful-component

--description--

Eines der wichtigsten Themen in React ist der Zustand (state). Der Zustand besteht aus allen Daten, die deine Anwendung kennen muss und die sich im Laufe der Zeit ändern können. Du möchtest, dass deine Apps auf Zustandsänderungen reagieren und bei Bedarf eine aktualisierte Benutzeroberfläche präsentieren. React bietet eine gute Lösung für die Zustandsverwaltung von modernen Webanwendungen.

Du erstellst einen Zustand in einer React-Komponente, indem du eine state-Eigenschaft für die Komponentenklasse in ihrem constructor deklarierst. Dies initialisiert die Komponente mit state, wenn sie erstellt wird. Die Eigenschaft state muss auf ein JavaScript object gesetzt werden. Die Deklaration sieht so aus:

this.state = {

}

Du hast während der gesamten Lebensdauer deiner Komponente Zugriff auf das state-Objekt. Du kannst es aktualisieren, in deiner Benutzeroberfläche darstellen und als Eigenschaften an Kindkomponenten weitergeben. Das state-Objekt kann so komplex oder so einfach sein, wie du es brauchst. Beachte, dass du eine Komponentenklasse erstellen musst, indem du React.Component erweiterst, um state auf diese Weise zu erstellen.

--instructions--

Es gibt eine Komponente im Code-Editor, die versucht eine firstName-Eigenschaft aus dem state zu übertragen. Es ist jedoch kein state definiert. Initialisiere die Komponente mit state im constructor und weise deinen Namen zu einer Eigenschaft firstName.

--hints--

StatefulComponent sollte existieren und gerendert werden.

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

StatefulComponent sollte ein div und ein h1-Element darstellen.

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

Der Zustand von StatefulComponent sollte mit einer Eigenschaft firstName eingeleitet werden, die einem String zugeordnet ist.

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

Die Eigenschaft firstName im StatefulComponent sollte im h1-Element übertragen werden.

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

--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.firstName}</h1>
      </div>
    );
  }
};

--solutions--

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