{ }
, para tarefas como acessar adereços, aprovar, acessar o estado, inserir comentários em seu código e, mais recentemente, estilizar seus componentes. Esses são todos os casos de uso comuns para colocar o JavaScript no JSX, mas eles não são a única maneira de usar o código JavaScript nos componentes do React. Você também pode escrever JavaScript diretamente em seus métodos de render
, antes da instrução de return
, sem inseri-lo dentro das chaves. Isso ocorre porque ainda não está no código JSX. Quando você quiser usar uma variável posteriormente no código JSX dentro da instrução de return
, coloque o nome da variável dentro de chaves. render
tem uma matriz que contém 20 frases para representar as respostas encontradas no brinquedo clássico dos anos 80 do Magic Eight Ball. O evento de clique de botão está vinculado ao método ask
, então toda vez que o botão for clicado, um número aleatório será gerado e armazenado como o randomIndex
no estado. Na linha 52, exclua a string "change me!"
e reatribuir a answer
const para que seu código acesse aleatoriamente um índice diferente do array possibleAnswers
sempre que o componente for atualizado. Finalmente, insira a answer
const dentro das tags p
. MagicEightBall
deve existir e deve renderizar para a página.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find("MagicEightBall").length, 1, "The MagicEightBall
component should exist and should render to the page.");'
- text: O primeiro filho de MagicEightBall
deve ser um elemento de input
.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), "input", "MagicEightBall
's first child should be an input
element.");'
- text: O terceiro filho de MagicEightBall
deve ser um elemento de button
.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), "button", "MagicEightBall
's third child should be a button
element.");'
- text: O estado de MagicEightBall
deve ser inicializado com uma propriedade de userInput
e uma propriedade de randomIndex
ambas configuradas para um valor de uma string vazia.
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).state("randomIndex") === "" && Enzyme.mount(React.createElement(MagicEightBall)).state("userInput") === "", "MagicEightBall
's state should be initialized with a property of userInput
and a property of randomIndex
both set to a value of an empty string.");'
- text: 'Quando o MagicEightBall
é montado pela primeira vez no DOM, ele deve retornar um elemento p
vazio.'
testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).find("p").length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find("p").text() === "", "When MagicEightBall
is first mounted to the DOM, it should return an empty p
element.");'
- text: 'Quando o texto é inserido no elemento de input
e o botão é clicado, o componente MagicEightBall
deve retornar um elemento p
que contém um elemento aleatório da matriz possibleAnswers
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find("input").simulate("change", { target: { value: "test?" }}); comp.find("button").simulate("click"); }; const result = () => 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 _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 _1_val = await _1(); 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 actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, "When text is entered into the input
element and the button is clicked, the MagicEightBall
component should return a p
element that contains a random element from the possibleAnswers
array.");}'
```
{ /* change code below this line */ } { /* change code above this line */ }