2018-10-10 22:03:03 +00:00
---
id: 5a24c314108439a4d403616a
2021-02-06 04:42:36 +00:00
title: Pass an Array as Props
2018-10-10 22:03:03 +00:00
challengeType: 6
2020-09-17 16:13:42 +00:00
forumTopicId: 301401
2021-01-13 02:31:00 +00:00
dashedName: pass-an-array-as-props
2018-10-10 22:03:03 +00:00
---
2020-12-16 07:37:30 +00:00
# --description--
2021-02-06 04:42:36 +00:00
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.
2020-09-17 16:13:42 +00:00
```jsx
< ParentComponent >
< ChildComponent colors = {["green", " blue " , " red " ] } / >
< / ParentComponent >
```
2021-02-06 04:42:36 +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.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --instructions--
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
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.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --hints--
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
The `ToDo` component should return a single outer `div` .
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.children().first().type() === 'div';
})()
);
```
2021-02-06 04:42:36 +00:00
The third child of the `ToDo` component should be an instance of the `List` component.
2020-12-16 07:37:30 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.children().first().childAt(2).name() === 'List';
})()
);
2018-10-10 22:03:03 +00:00
```
2021-02-06 04:42:36 +00:00
The fifth child of the `ToDo` component should be an instance of the `List` component.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.children().first().childAt(4).name() === 'List';
})()
);
```
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
Both instances of the `List` component should have a property called `tasks` and `tasks` should be of type array.
2018-10-10 22:03:03 +00:00
```js
2020-12-16 07:37:30 +00:00
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)
);
})()
);
2018-10-10 22:03:03 +00:00
```
2021-02-06 04:42:36 +00:00
The first `List` component representing the tasks for today should have 2 or more items.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.find('List').get(0).props.tasks.length >= 2;
})()
);
```
2018-10-10 22:03:03 +00:00
2021-02-06 04:42:36 +00:00
The second `List` component representing the tasks for tomorrow should have 3 or more items.
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.find('List').get(1).props.tasks.length >= 3;
})()
);
```
2021-02-06 04:42:36 +00:00
The `List` component should render the value from the `tasks` prop in the `p` tag.
2020-09-17 16:13:42 +00:00
2018-10-10 22:03:03 +00:00
```js
2020-12-16 07:37:30 +00:00
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
2020-09-17 16:13:42 +00:00
return (
2021-02-06 04:42:36 +00:00
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, ',')
2020-09-17 16:13:42 +00:00
);
2020-12-16 07:37:30 +00:00
})()
);
2018-10-10 22:03:03 +00:00
```
2020-08-13 15:24:35 +00:00
2021-01-13 02:31:00 +00:00
# --seed--
## --after-user-code--
```jsx
ReactDOM.render(< ToDo / > , document.getElementById('root'))
```
## --seed-contents--
```jsx
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 >
);
}
};
```
2020-12-16 07:37:30 +00:00
# --solutions--
2021-01-13 02:31:00 +00:00
```jsx
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 >
);
}
};
```