<sectionid="description"> En los desafíos anteriores, aprendió a inyectar código JavaScript en el código JSX usando llaves, <code>{ }</code> , para tareas como acceder a accesorios, aprobar accesorios, acceder a estados, insertar comentarios en su código y, más recientemente, diseñar estilos para sus componentes. Estos son todos los casos de uso comunes para poner JavaScript en JSX, pero no son la única forma en que puede utilizar el código JavaScript en sus componentes React. También puede escribir JavaScript directamente en sus métodos de <code>render</code> , antes de la declaración de <code>return</code> , <strong><em>sin</em></strong> insertarlo dentro de llaves. Esto se debe a que aún no está dentro del código JSX. Cuando desee utilizar una variable más adelante en el código JSX <em>dentro de</em> la declaración de <code>return</code> , coloque el nombre de la variable entre llaves. </section>
<sectionid="instructions"> En el código provisto, el método de <code>render</code> tiene una matriz que contiene 20 frases para representar las respuestas encontradas en el clásico juguete de la bola mágica de los ochenta. El evento de clic de botón está ligado al <code>ask</code> método, por lo que cada vez que se hace clic en el botón de un número aleatorio se genera y se almacena como el <code>randomIndex</code> en el estado. En la línea 52, borra la cadena <code>"change me!"</code> y reasigne la <code>answer</code> constante para que su código acceda al azar a un índice diferente de la <code>possibleAnswers</code> matriz de <code>answer</code> cada vez que se actualice el componente. Finalmente, inserta la <code>answer</code> const dentro de las etiquetas <code>p</code> . </section>
- text: El componente <code>MagicEightBall</code> debe existir y debe <code>MagicEightBall</code> en la página.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find("MagicEightBall").length, 1, "The <code>MagicEightBall</code> component should exist and should render to the page.");'
- text: El primer hijo de <code>MagicEightBall</code> debería ser un elemento de <code>input</code> .
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), "input", "<code>MagicEightBall</code>'s first child should be an <code>input</code> element.");'
- text: El tercer hijo de <code>MagicEightBall</code> debería ser un elemento de <code>button</code> .
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), "button", "<code>MagicEightBall</code>'s third child should be a <code>button</code> element.");'
- text: El estado de <code>MagicEightBall</code> debe inicializarse con una propiedad de <code>userInput</code> y una propiedad de <code>randomIndex</code> ambas configuradas en un valor de una cadena vacía.
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).state("randomIndex") === "" && Enzyme.mount(React.createElement(MagicEightBall)).state("userInput") === "", "<code>MagicEightBall</code>'s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.");'
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).find("p").length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find("p").text() === "", "When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.");'
- text: 'Cuando se ingresa texto en el elemento de <code>input</code> y se hace clic en el botón, el componente <code>MagicEightBall</code> debería devolver un elemento <code>p</code> que contenga un elemento aleatorio de la <code>possibleAnswers</code> matriz de <code>MagicEightBall</code> .'