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.
<ParentComponent>The child component then has access to the array property
<ChildComponent colors={["green", "blue", "red"]} />
</ParentComponent>
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.
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.
ToDo
component should return a single outer div
.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })(), 'The ToDo
component should return a single outer div
.');
- text: The third child of the ToDo
component should be an instance of the List
component.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === 'List'; })(), 'The third child of the ToDo
component should be an instance of the List
component.');
- text: The fifth child of the ToDo
component should be an instance of the List
component.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })(), 'The fifth child of the ToDo
component should be an instance of the List
component.');
- text: Both instances of the List
component should have a property called tasks
and tasks
should be of type array.
testString: 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); })(), 'Both instances of the List
component should have a property called tasks
and tasks
should be of type array.');
- text: The first List
component representing the tasks for today should have 2 or more items.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(0).props.tasks.length >= 2; })(), 'The first List
component representing the tasks for today should have 2 or more items.');
- text: The second List
component representing the tasks for tomorrow should have 3 or more items.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(1).props.tasks.length >= 3; })(), 'The second List
component representing the tasks for tomorrow should have 3 or more items.');
- text: The List
component should render the value from the tasks
prop in the p
tag.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('p').get(0).props.children === mockedComponent.find('List').get(0).props.tasks.join(', ') && mockedComponent.find('p').get(1).props.children === mockedComponent.find('List').get(1).props.tasks.join(', '); })(), 'The List
component should render the value from the tasks
prop in the p
tag.');
```
{}
{ /* change code above this line */ } }; class ToDo extends React.Component { constructor(props) { super(props); } render() { return ({props.tasks.join(', ')}
}; class ToDo extends React.Component { constructor(props) { super(props); } render() { return (