<sectionid="description"> Antes de pasar a las técnicas de representación dinámica, hay una última forma de usar condicionales de JavaScript incorporados para representar lo que desea: el <em><strong>operador ternario</strong></em> . El operador ternario se utiliza a menudo como acceso directo para las declaraciones <code>if/else</code> en JavaScript. No son tan robustos como las declaraciones tradicionales <code>if/else</code> , pero son muy populares entre los desarrolladores de React. Una razón para esto se debe a cómo se compila JSX, <code>if/else</code> sentencias no se pueden insertar directamente en el código JSX. Es posible que haya notado esto hace un par de desafíos: cuando se requería una declaración <code>if/else</code> , siempre estaba <em>fuera de</em> la declaración de <code>return</code> . Las expresiones ternarias pueden ser una excelente alternativa si desea implementar lógica condicional dentro de su JSX. Recuerde que un operador ternario tiene tres partes, pero puede combinar varias expresiones ternarias juntas. Aquí está la sintaxis básica: <blockquote> condición? expressionIfTrue: expressionIfFalse </blockquote></section>
<sectionid="instructions"> El editor de código tiene tres constantes definidas dentro del <code>CheckUserAge</code><code>render()</code> del componente <code>CheckUserAge</code> . Se denominan <code>buttonOne</code> , <code>buttonTwo</code> y <code>buttonThree</code> . A cada uno de estos se les asigna una expresión JSX simple que representa un elemento de botón. Primero, inicialice el estado de <code>CheckUserAge</code> con <code>input</code> y <code>userAge</code> ambos configurados en valores de una cadena vacía. Una vez que el componente está brindando información a la página, los usuarios deben tener una forma de interactuar con él. Dentro de la declaración de <code>return</code> del componente, configure una expresión ternaria que implemente la siguiente lógica: cuando la página se carga por primera vez, renderice el botón de envío, <code>buttonOne</code> , a la página. Luego, cuando un usuario ingresa su edad y hace clic en el botón, renderiza un botón diferente según la edad. Si un usuario ingresa un número menor que <code>18</code> , render <code>buttonThree</code> . Si un usuario ingresa un número mayor o igual a <code>18</code> , renderice el <code>buttonTwo</code> . </section>
- text: El componente <code>CheckUserAge</code> debe procesarse con un solo elemento de <code>input</code> y un solo elemento de <code>button</code> .
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("input").length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("button").length === 1, "The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.");'
- text: 'El <code>CheckUserAge</code> componente <code>CheckUserAge</code> debe inicializarse con una propiedad de <code>userAge</code> y una propiedad de <code>input</code> , ambas configuradas con el valor de una cadena vacía.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === "" && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === "", "The <code>CheckUserAge</code> component's state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.");'
- text: 'Cuando el componente <code>CheckUserAge</code> se procesa por primera vez en el DOM, el texto interno del <code>button</code> debe ser Enviar.'
testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("button").text() === "Submit", "When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>'s inner text should be Submit.");'
- text: 'Cuando se introduce un número inferior a 18 a la <code>input</code> elemento y el <code>button</code> se hace clic en el <code>button</code>'s texto interno debe leer <code>You Shall Not Pass</code> .'
- text: 'Cuando se introduce un número mayor o igual a 18 a la <code>input</code> elemento y el <code>button</code> se hace clic en el <code>button</code>'s texto interno debe leer <code>You May Enter</code> .'
- text: 'Una vez que se ha enviado un número, y el valor de la <code>input</code> se cambia una vez más, el <code>button</code> debería volver a leer <code>Submit</code> .'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "5" }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter10AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "10" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === "You May Enter" && changeInput1 === "Submit" && userAge10 === "You Shall Not Pass" && changeInput2 === "Submit", "Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>."); }; '
- text: Su código no debe contener ninguna declaración <code>if/else</code> .
testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, "Your code should not contain any <code>if/else</code> statements.");'