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>

This will join all colors array items into a comma separated string and produce: <p>green, blue, red</p>. Later, we will learn about other common methods to render arrays of data in React.

--instructions--

There are List and ToDo components in the code editor. 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. Use join(", ") to display the props.tasks array in the p element as a comma-separated list. Today's list should have at least 2 tasks and tomorrow's should have at least 3 tasks.

--hints--

The ToDo component should return a single outer div.

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';
  })()
);

Both instances of the List component should have a property called tasks and tasks should be of type array.

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)
    );
  })()
);

The first List component representing the tasks for today should have 2 or more items.

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

The second List component representing the tasks for tomorrow should have 3 or more items.

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

The List component should render the value from the tasks prop in the p tag.

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>
    );
  }
};