props
o propiedades. Este desafío analiza cómo se pueden pasar las matrices como props
. Para pasar una matriz a un elemento JSX, se debe tratar como JavaScript y se debe incluir entre llaves. <ParentComponent>El componente hijo tiene acceso a los
<ChildComponent colors = {["green", "blue", "red"]} />
</ParentComponent>
colors
propiedad de matriz. Se pueden usar métodos de matriz como join()
al acceder a la propiedad. const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>
Esto unirá todos los elementos de matriz de colors
en una cadena separada por comas y producirá: <p>green, blue, red</p>
Más adelante, aprenderemos sobre otros métodos comunes para procesar matrices de datos en React. List
y ToDo
en el editor de código. Al representar cada List
desde el componente de ToDo
, pase una propiedad de tasks
asignada a una serie de tareas a realizar, por ejemplo ["walk dog", "workout"]
. Luego acceda a esta matriz de tasks
en el componente List
, mostrando su valor dentro del elemento p
. Utilice join(", ")
para mostrar la matriz props.tasks
en el elemento p
como una lista separada por comas. La lista de hoy debe tener al menos 2 tareas y la de mañana debe tener al menos 3 tareas. ToDo
debe devolver un solo div
exterior.
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: El tercer elemento secundario del componente ToDo
debe ser una instancia del componente List
.
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: El quinto elemento secundario del componente ToDo
debe ser una instancia del componente List
.
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: Ambas instancias del componente List
deben tener una propiedad llamada tasks
y las tasks
deben ser de tipo 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: El primer componente de la List
que representa las tareas de hoy debe tener 2 o más elementos.
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: El segundo componente de la List
que representa las tareas para mañana debe tener 3 o más elementos.
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: 'El componente List
debe representar el valor de las tasks
prop en la etiqueta p
como una lista separada por comas, por ejemplo, walk dog, workout
.'
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 as a comma separated list, for example walk dog, workout
.");'
```
{}
{ /* change code above this line */ } }; class ToDo extends React.Component { constructor(props) { super(props); } render() { return (