freeCodeCamp/curriculum/challenges/german/03-front-end-development-libraries/react/pass-an-array-as-props.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d403616a	Übergabe eines Arrays als Eigenschaft	6	301401	pass-an-array-as-props

--description--

In der letzten Aufgabe wurde gezeigt, wie man Informationen von einer Elternkomponente an eine Kindkomponente als props oder Eigenschaften weitergibt. In dieser Aufgabe geht es darum, wie Arrays als props übergeben werden können. Um ein Array an ein JSX-Element zu übergeben, muss es als JavaScript behandelt werden und in geschweifte Klammern eingeschlossen werden.

<ParentComponent>
  <ChildComponent colors={["green", "blue", "red"]} />
</ParentComponent>

Die Kindkomponente hat dann Zugriff auf die Array-Eigenschaft colors. Array-Methoden wie join() können beim Zugriff auf die Eigenschaft verwendet werden.

const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>

Dies fügt alle colors-Arrayelemente zu einem durch Kommas getrennten String zusammen und erzeugt: <p>green, blue, red</p>. Später werden wir andere gängige Methoden zum Rendern von Datenarrays in React kennenlernen.

--instructions--

Im Code-Editor gibt es List- und ToDo-Komponenten. When rendering each List from the ToDo component, pass in a tasks property assigned to an array of to-do tasks, for example ["walk dog", "workout"]. Then access this tasks array in the List component, showing its value within the p element. Verwende join(", "), um das props.tasks-Array im p-Element als kommagetrennte Liste anzuzeigen. Die heutige Liste sollte mindestens 2 Aufgaben und die Liste von morgen sollte mindestens 3 Aufgaben enthalten.

--hints--

Die ToDo-Komponente sollte ein einzelnes äußeres div zurückgeben.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
    return mockedComponent.children().first().type() === 'div';
  })()
);

The third child of the ToDo component should be an instance of the List component.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
    return mockedComponent.children().first().childAt(2).name() === 'List';
  })()
);

The fifth child of the ToDo component should be an instance of the List component.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
    return mockedComponent.children().first().childAt(4).name() === 'List';
  })()
);

Beide Instanzen der List-Komponente sollten eine Eigenschaft namens tasks enthalten und tasks sollte vom Typ Array sein.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
    return (
      Array.isArray(mockedComponent.find('List').get(0).props.tasks) &&
      Array.isArray(mockedComponent.find('List').get(1).props.tasks)
    );
  })()
);

Die erste List-Komponente, die die Aufgaben für den heutigen Tag darstellt, sollte 2 oder mehr Elemente enthalten.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
    return mockedComponent.find('List').get(0).props.tasks.length >= 2;
  })()
);

Die zweite List-Komponente, die die Aufgaben für den morgigen Tag darstellt, sollte 3 oder mehr Elemente enthalten.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
    return mockedComponent.find('List').get(1).props.tasks.length >= 3;
  })()
);

Die List-Komponente sollte den Wert aus der tasks-Eigenschaft im p-Tag rendern.

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
    return (
      mockedComponent
        .find('p')
        .get(0)
        .props.children.replace(/\s*,\s*/g, ',') ===
        mockedComponent
          .find('List')
          .get(0)
          .props.tasks.join(',')
          .replace(/\s*,\s*/g, ',') &&
      mockedComponent
        .find('p')
        .get(1)
        .props.children.replace(/\s*,\s*/g, ',') ===
        mockedComponent
          .find('List')
          .get(1)
          .props.tasks.join(',')
          .replace(/\s*,\s*/g, ',')
    );
  })()
);

--seed--

--after-user-code--

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

--seed-contents--

const List = (props) => {
  { /* Change code below this line */ }
  return <p>{}</p>
  { /* Change code above this line */ }
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>To Do Lists</h1>
        <h2>Today</h2>
        { /* Change code below this line */ }
        <List/>
        <h2>Tomorrow</h2>
        <List/>
        { /* Change code above this line */ }
      </div>
    );
  }
};

--solutions--

const List= (props) => {
  return <p>{props.tasks.join(', ')}</p>
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>To Do Lists</h1>
        <h2>Today</h2>
        <List tasks={['study', 'exercise']} />
        <h2>Tomorrow</h2>
        <List tasks={['call Sam', 'grocery shopping', 'order tickets']} />
      </div>
    );
  }
};