2018-10-04 13:37:37 +00:00
---
id: 5a24c314108439a4d403616a
title: Pass an Array as Props
challengeType: 6
2019-08-05 16:17:33 +00:00
forumTopicId: 301401
2021-01-13 02:31:00 +00:00
dashedName: pass-an-array-as-props
2018-10-04 13:37:37 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
The last challenge demonstrated how to pass information from a parent component to a child component as `props` or properties. This challenge looks at how arrays can be passed as `props` . To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces.
2019-05-14 12:01:32 +00:00
```jsx
< ParentComponent >
< ChildComponent colors = {["green", " blue " , " red " ] } / >
< / ParentComponent >
```
2020-11-27 18:02:05 +00:00
The child component then has access to the array property `colors` . Array methods such as `join()` can be used when accessing the property. `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` .
```js
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.
```js
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.
```js
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.
```js
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.
```js
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.
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.find('List').get(1).props.tasks.length >= 3;
})()
);
2018-10-04 13:37:37 +00:00
```
2020-11-27 18:02:05 +00:00
The `List` component should render the value from the `tasks` prop in the `p` tag.
```js
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, ',')
);
})()
);
```
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
# --seed--
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
## --after-user-code--
```jsx
ReactDOM.render(< ToDo / > , document.getElementById('root'))
```
## --seed-contents--
2018-10-04 13:37:37 +00:00
```jsx
2019-05-08 23:32:02 +00:00
const List = (props) => {
2020-09-15 16:53:25 +00:00
{ /* Change code below this line */ }
2018-10-04 13:37:37 +00:00
return < p > {}< / p >
2020-09-15 16:53:25 +00:00
{ /* Change code above this line */ }
2018-10-04 13:37:37 +00:00
};
class ToDo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
< div >
< h1 > To Do Lists< / h1 >
< h2 > Today< / h2 >
2020-09-15 16:53:25 +00:00
{ /* Change code below this line */ }
2018-10-04 13:37:37 +00:00
< List / >
< h2 > Tomorrow< / h2 >
< List / >
2020-09-15 16:53:25 +00:00
{ /* Change code above this line */ }
2018-10-04 13:37:37 +00:00
< / div >
);
}
};
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-10-04 13:37:37 +00:00
2020-07-13 16:58:50 +00:00
```jsx
2018-10-04 13:37:37 +00:00
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 >
);
}
};
```