<sectionid="description"> La representación condicional es útil, pero es posible que necesite que sus componentes representen un número desconocido de elementos. A menudo, en programación reactiva, un programador no tiene forma de saber cuál es el estado de una aplicación hasta el tiempo de ejecución, ya que mucho depende de la interacción de un usuario con ese programa. Los programadores deben escribir su código para manejar correctamente ese estado desconocido antes de tiempo. Usar <code>Array.map()</code> 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 <em><strong>muestre dinámicamente</strong></em> 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. </section>
<sectionid="instructions"> El editor de código tiene la mayor parte del componente <code>MyToDoList</code> configurado. Parte de este código debe parecer familiar si completó el desafío del formulario controlado. Notará un área de <code>textarea</code> y un <code>button</code> , junto con un par de métodos que rastrean sus estados, pero todavía no se muestra nada en la página. Dentro del <code>constructor</code> , cree un objeto <code>this.state</code> y defina dos estados: <code>userInput</code> debe inicializarse como una cadena vacía, y <code>toDoList</code> debe inicializarse como una matriz vacía. A continuación, elimine el comentario en el método <code>render()</code> junto a la variable de <code>items</code> . En su lugar, <code>toDoList</code> sobre la matriz <code>toDoList</code> almacenada en el estado interno del componente y <code>toDoList</code> dinámicamente un <code>li</code> para cada elemento. Intente ingresar la cadena <code>eat, code, sleep, repeat</code> en el área de <code>textarea</code> , luego haga clic en el botón y vea qué sucede. <strong>Nota:</strong> 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 <code>key</code> único. No te preocupes, este es el tema del próximo reto. </section>
- text: El componente MyToDoList debería existir y representarse en la página.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").length === 1; })(), "The MyToDoList component should exist and render to the page.");'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(0).type() === "textarea"; })(), "The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.");'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(2).type() === "button"; })(), "The third child of <code>MyToDoList</code> should be a <code>button</code> element.");'
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 <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.");'
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 <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.");'
- text: 'Cuando se hace clic en el botón <code>Create List</code> , el componente <code>MyToDoList</code> 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 <code>textarea</code> .'