if/else
estándar en el método render()
de un componente React. boolean
en su estado que rastrea si desea mostrar algún elemento en la interfaz de usuario o no. El button
cambia el estado de este valor. Actualmente, rinde la misma interfaz de usuario cada vez. Reescriba el método render()
con una instrucción if/else
para que si la display
es true
, devuelva el marcado actual. De lo contrario, devuelva el marcado sin el elemento h1
. Nota: Debe escribir un if/else
para pasar las pruebas. El uso del operador ternario no pasará aquí. MyComponent
debería existir y renderizarse.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length === 1; })(), "MyComponent
should exist and render.");'
- text: 'Cuando la display
se configura como true
, se debe display
un div
, un button
y h1
.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find("div").length === 1 && mockedComponent.find("div").children().length === 2 && mockedComponent.find("button").length === 1 && mockedComponent.find("h1").length === 1, "When display
is set to true
, a div
, button
, and h1
should render."); }; '
- text: 'Cuando la display
está configurada en false
, solo button
debe display
un button
div
y.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find("div").length === 1 && mockedComponent.find("div").children().length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("h1").length === 0, "When display
is set to false
, only a div
and button
should render."); }; '
- text: El método de render debería usar una instrucción if/else
para verificar la condición de this.state.display
.
testString: 'getUserInput => assert(getUserInput("index").includes("if") && getUserInput("index").includes("else"), "The render method should use an if/else
statement to check the condition of this.state.display
.");'
```