2021-06-15 07:49:18 +00:00
---
id: 5a24c314108439a4d403616a
2021-07-17 10:31:27 +00:00
title: Passe um Array como Props
2021-06-15 07:49:18 +00:00
challengeType: 6
forumTopicId: 301401
dashedName: pass-an-array-as-props
---
# --description--
2021-07-17 10:31:27 +00:00
O último desafio demonstrou como passar informações de um componente pai para um componente filho como propriedades `props` . Este desafio analisa como matrizes podem ser passadas como `props` . Para passar um array para um elemento JSX, ele deve ser tratado como JavaScript e encapsulado em chaves.
2021-06-15 07:49:18 +00:00
```jsx
< ParentComponent >
< ChildComponent colors = {["green", " blue " , " red " ] } / >
< / ParentComponent >
```
2021-07-17 10:31:27 +00:00
O componente filho então tem acesso às propriedades `colors` do array. Métodos de array como `join()` podem ser usados ao acessar a propriedade. `const ChildComponent = (props) => <p>{props.colors. oin(', ')}</p>` Isto irá juntar todas os itens do array `colors` em uma string separada por vírgulas e produzir: `<p>green, blue, red</p>` Mais tarde, aprenderemos sobre outros métodos comuns para renderizar arrays de dados em React.
2021-06-15 07:49:18 +00:00
# --instructions--
2021-07-17 10:31:27 +00:00
Existem os componentes `List` e `ToDo` no editor de código. Ao renderizar cada `List` do componente `ToDo` , passe em uma propriedade `tasks` atribuída a um array de tarefas a fazer, por exemplo `["walk dog", "workout"]` . Em seguida, acesse o array `tasks` no componente `List` , mostrando seu valor dentro do elemento `p` . Use `join(", ")` para exibir o array `props.tasks` no elemento `p` como uma lista separada por vírgulas. A lista de hoje deveria ter pelo menos 2 tarefas e a de amanhã deveria ter pelo menos 3 tarefas.
2021-06-15 07:49:18 +00:00
# --hints--
2021-07-17 10:31:27 +00:00
O componente `ToDo` deve retornar um único `div` externo.
2021-06-15 07:49:18 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.children().first().type() === 'div';
})()
);
```
2021-07-17 10:31:27 +00:00
O terceiro filho do componente `ToDo` deve ser uma instância do componente `List` .
2021-06-15 07:49:18 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.children().first().childAt(2).name() === 'List';
})()
);
```
2021-07-17 10:31:27 +00:00
O quinto filho do componente `ToDo` deve ser uma instância do componente `List` .
2021-06-15 07:49:18 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.children().first().childAt(4).name() === 'List';
})()
);
```
2021-07-17 10:31:27 +00:00
Ambas as instâncias do componente `List` devem ter uma propriedade chamada `tasks` e `tasks` devem ser do tipo array.
2021-06-15 07:49:18 +00:00
```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)
);
})()
);
```
2021-07-17 10:31:27 +00:00
O primeiro componente `List` que representa as tarefas para hoje deve ter 2 ou mais itens.
2021-06-15 07:49:18 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.find('List').get(0).props.tasks.length >= 2;
})()
);
```
2021-07-17 10:31:27 +00:00
O segundo componente `List` que representa as tarefas para amanhã deve ter 3 ou mais itens.
2021-06-15 07:49:18 +00:00
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ToDo));
return mockedComponent.find('List').get(1).props.tasks.length >= 3;
})()
);
```
2021-07-17 10:31:27 +00:00
O componente `List` deve renderizar o valor da propriedade `tasks` na tag `p` .
2021-06-15 07:49:18 +00:00
```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, ',')
);
})()
);
```
# --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 >
);
}
};
```
# --solutions--
```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 >
);
}
};
```