if/else
, &&,
null
e o operador ternário ( condition ? expressionIfTrue : expressionIfFalse
) para tomar decisões condicionais sobre o que renderizar e quando. No entanto, há um tópico importante a ser discutido que permite combinar qualquer um ou todos esses conceitos com outro recurso poderoso do React: adereços. Usar adereços para renderizar condicionalmente o código é muito comum com os desenvolvedores do React - isto é, eles usam o valor de um determinado objeto para tomar decisões automaticamente sobre o que renderizar. Nesse desafio, você configurará um componente filho para tomar decisões de renderização com base em adereços. Você também usará o operador ternário, mas poderá ver como vários outros conceitos abordados nos últimos desafios podem ser úteis nesse contexto. GameOfChance
e um filho chamado Results
. Eles são usados para criar um jogo simples em que o usuário pressiona um botão para ver se ele ganha ou perde. Primeiro, você precisará de uma expressão simples que retorne aleatoriamente um valor diferente toda vez que for executada. Você pode usar Math.random()
. Esse método retorna um valor entre 0
(inclusive) e 1
(exclusivo) sempre que é chamado. Portanto, para probabilidades de 50/50, use Math.random() > .5
em sua expressão. Estatisticamente falando, essa expressão retornará true
50% do tempo e false
os outros 50%. Na linha 30, substitua o comentário por essa expressão para completar a declaração da variável. Agora você tem uma expressão que pode ser usada para tomar uma decisão aleatória no código. Em seguida, você precisa implementar isso. Renderize o componente Results
como um filho de GameOfChance
e passe a expression
como um prop chamado fiftyFifty
. No componente Results
, escreva uma expressão ternária para renderizar o texto "You win!"
ou "You lose!"
baseado no fiftyFifty
que está sendo passado de GameOfChance
. Por fim, verifique se o método handleClick()
está contando corretamente cada turno, para que o usuário saiba quantas vezes eles foram reproduzidos. Isso também serve para informar ao usuário que o componente foi realmente atualizado caso ganhe ou perca duas vezes seguidas. GameOfChance
deve existir e renderizar para a página.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("GameOfChance").length, 1, "The GameOfChance
component should exist and render to the page.");'
- text: GameOfChance
deve retornar um único elemento de button
.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("button").length, 1, "GameOfChance
should return a single button
element.");'
- text: 'GameOfChance
deve retornar uma única instância do componente Results
, que possui um prop chamado fiftyFifty
.'
testString: 'assert(Enzyme.mount(React.createElement(GameOfChance)).find("Results").length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find("Results").props().hasOwnProperty("fiftyFifty") === true, "GameOfChance
should return a single instance of the Results
component, which has a prop called fiftyFifty
.");'
- text: GameOfChance
estado de GameOfChance
deve ser inicializado com uma propriedade do counter
definida como um valor de 1
.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, "GameOfChance
state should be initialized with a property of counter
set to a value of 1
.");'
- text: 'Quando o componente GameOfChance
é renderizado pela primeira vez no DOM, um elemento p
deve ser retornado com o texto interno de Turn: 1
.'
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("p").text(), "Turn: 1", "When the GameOfChance
component is first rendered to the DOM, a p
element should be returned with the inner text of Turn: 1
.");'
- text: 'Cada vez que o botão é clicado, o estado do contador deve ser incrementado por um valor de 1, e um único elemento p
deve ser renderizado para o DOM que contém o texto "Turn: N", onde N é o valor do estado do contador.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find("button").simulate("click"); };const result = () => ({ count: comp.state("counter"), text: comp.find("p").text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === "Turn: 2" && _2_val.count === 3 && _2_val.text === "Turn: 3" && _3_val.count === 4 && _3_val.text === "Turn: 4" && _4_val.count === 5 && _4_val.text === "Turn: 5" && _5_val.count === 6 && _5_val.text === "Turn: 6", "Each time the button is clicked, the counter state should be incremented by a value of 1, and a single p
element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state."); }; '
- text: 'Quando o componente GameOfChance
é montado pela primeira vez no DOM e cada vez que o botão é clicado, um único elemento h1
deve ser retornado para renderizar aleatoriamente You Win!
ou You Lose!
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find("button").simulate("click"); };const result = () => ({ h1: comp.find("h1").length, text: comp.find("h1").text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1, "When the GameOfChance
component is first mounted to the DOM and each time the button is clicked thereafter, a single h1
element should be returned that randomly renders either You Win!
or You Lose!
."); }; '
```
{'Turn: ' + this.state.counter}