<sectionid="description"> Hasta ahora, ha visto cómo usar <code>if/else</code> , <code>&&,</code><code>null</code> y el operador ternario ( <code>condition ? expressionIfTrue : expressionIfFalse</code> ) para tomar decisiones condicionales sobre qué representar y cuándo. Sin embargo, hay un tema importante que queda por discutir que te permite combinar cualquiera o todos estos conceptos con otra poderosa característica React: accesorios. El uso de utilería para generar condicionalmente el código es muy común entre los desarrolladores de React, es decir, utilizan el valor de una prop determinada para tomar decisiones automáticamente sobre qué representar. En este desafío, configurará un componente secundario para tomar decisiones de representación basadas en accesorios. También usará el operador ternario, pero puede ver cómo varios de los otros conceptos que se cubrieron en los últimos desafíos podrían ser igual de útiles en este contexto. </section>
<sectionid="instructions"> El editor de código tiene dos componentes que están parcialmente definidos para usted: un padre llamado <code>GameOfChance</code> y un hijo llamado <code>Results</code> . Se utilizan para crear un juego simple en el que el usuario presiona un botón para ver si gana o pierde. Primero, necesitará una expresión simple que retorne aleatoriamente un valor diferente cada vez que se ejecute. Puedes usar <code>Math.random()</code> . Este método devuelve un valor entre <code>0</code> (incluido) y <code>1</code> (exclusivo) cada vez que se llama. Entonces, para probabilidades 50/50, use <code>Math.random() > .5</code> en su expresión. Estadísticamente hablando, esta expresión devolverá <code>true</code> 50% del tiempo, y <code>false</code> el otro 50%. En la línea 30, reemplace el comentario con esta expresión para completar la declaración de la variable. Ahora tiene una expresión que puede usar para tomar una decisión aleatoria en el código. A continuación necesitas implementar esto. Procese el componente <code>Results</code> como un elemento secundario de <code>GameOfChance</code> y pase la <code>expression</code> como un prop llamado <code>fiftyFifty</code> . En el componente <code>Results</code> , escriba una expresión ternaria para representar el texto <code>"You win!"</code> o <code>"You lose!"</code> basado en la propuesta <code>fiftyFifty</code> que se transmite desde <code>GameOfChance</code> . Finalmente, asegúrese de que el método <code>handleClick()</code> esté contando correctamente cada turno para que el usuario sepa cuántas veces ha jugado. Esto también sirve para que el usuario sepa que el componente se ha actualizado en caso de que gane o pierda dos veces seguidas. </section>
- text: El componente <code>GameOfChance</code> debe existir y representarse en la página.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("GameOfChance").length, 1, "The <code>GameOfChance</code> component should exist and render to the page.");'
- text: <code>GameOfChance</code> debería devolver un único elemento de <code>button</code> .
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("button").length, 1, "<code>GameOfChance</code> should return a single <code>button</code> element.");'
- text: '<code>GameOfChance</code> debe devolver una sola instancia del componente <code>Results</code> , que tiene un prop llamado <code>fiftyFifty</code> .'
testString: 'assert(Enzyme.mount(React.createElement(GameOfChance)).find("Results").length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find("Results").props().hasOwnProperty("fiftyFifty") === true, "<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.");'
- text: <code>GameOfChance</code> estado de <code>GameOfChance</code> debe inicializar con una propiedad de <code>counter</code> configurada en un valor de <code>1</code> .
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, "<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.");'
- text: 'Cuando el componente <code>GameOfChance</code> se procesa por primera vez en el DOM, se debe devolver un elemento <code>p</code> con el texto interno de <code>Turn: 1</code> .'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("p").text(), "Turn: 1", "When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.");'
- text: 'Cada vez que se hace clic en el botón, el estado del contador debe incrementarse en un valor de 1, y se debe representar un solo elemento <code>p</code> en el DOM que contiene el texto "Turn: N", donde N es el valor del estado del contador.'
- text: 'Cuando el componente <code>GameOfChance</code> se monta por primera vez en el DOM y cada vez que se hace clic en el botón a continuación, se debe devolver un único elemento <code>h1</code> que muestre aleatoriamente ¡ <code>You Win!</code> o <code>You Lose!</code> .'