Array.map()
en React ilustra este concepto. Por ejemplo, creas una aplicación simple "Lista de tareas pendientes". Como programador, no tiene forma de saber cuántos elementos puede tener un usuario en su lista. Debe configurar su componente para que muestre dinámicamente el número correcto de elementos de la lista mucho antes de que alguien que usa el programa decida que hoy es el día de la lavandería. MyToDoList
configurado. Parte de este código debe parecer familiar si completó el desafío del formulario controlado. Notará un área de textarea
y un button
, junto con un par de métodos que rastrean sus estados, pero todavía no se muestra nada en la página. Dentro del constructor
, cree un objeto this.state
y defina dos estados: userInput
debe inicializarse como una cadena vacía, y toDoList
debe inicializarse como una matriz vacía. A continuación, elimine el comentario en el método render()
junto a la variable de items
. En su lugar, toDoList
sobre la matriz toDoList
almacenada en el estado interno del componente y toDoList
dinámicamente un li
para cada elemento. Intente ingresar la cadena eat, code, sleep, repeat
en el área de textarea
, luego haga clic en el botón y vea qué sucede. Nota: Es posible que sepa que todos los elementos secundarios de hermanos creados por una operación de mapeo como esta deben suministrarse con un atributo de key
único. No te preocupes, este es el tema del próximo reto. MyToDoList
debe ser un elemento textarea
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(0).type() === "textarea"; })(), "The first child of MyToDoList
should be a textarea
element.");'
- text: El tercer elemento secundario de MyToDoList
debe ser un elemento de button
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(2).type() === "button"; })(), "The third child of MyToDoList
should be a button
element.");'
- text: El estado de MyToDoList
debe inicializarse con toDoList
como una matriz vacía.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), "The state of MyToDoList
should be initialized with toDoList
as an empty array.");'
- text: El estado de MyToDoList
debe inicializarse con userInput
como una cadena vacía.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === "string" && initialState.userInput.length === 0; })(), "The state of MyToDoList
should be initialized with userInput
as an empty string.");'
- text: 'Cuando se hace clic en el botón Create List
, el componente MyToDoList
debería devolver dinámicamente una lista desordenada que contenga un elemento de elemento de lista para cada elemento de una lista separada por comas ingresada en el elemento de área de textarea
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate("change", {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find("ul").find("li"))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === "testA testB testC" && awaited_state_3.text === "t1 t2 t3 t4 t5 t6", "When the Create List
button is clicked, the MyToDoList
component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea
element."); }; '
```