<sectionid="description"> Las declaraciones if / else funcionaron en el último desafío, pero hay una forma más concisa de lograr el mismo resultado. Imagine que está rastreando varias condiciones en un componente y desea que se representen diferentes elementos en función de cada una de estas condiciones. Si escribe muchas <code>else if</code> instrucciones, <code>else if</code> declaraciones devuelven interfaces de usuario ligeramente diferentes, puede repetir el código que deja espacio para el error. En su lugar, puede utilizar el operador lógico <code>&&</code> para realizar la lógica condicional de una manera más concisa. Esto es posible porque desea verificar si una condición es <code>true</code> y, si lo es, devolver algún margen de beneficio. Aquí hay un ejemplo: <code>{condition &&<p>markup</p>}</code> Si la <code>condition</code> es <code>true</code> , se devolverá la marca. Si la condición es <code>false</code> , la operación devolverá inmediatamente <code>false</code> después de evaluar la <code>condition</code> y no devolverá nada. Puede incluir estas declaraciones directamente en su JSX y encadenar varias condiciones juntas escribiendo <code>&&</code> después de cada una. Esto le permite manejar una lógica condicional más compleja en su método <code>render()</code> sin repetir mucho código. </section>
<sectionid="instructions"> Resuelva el ejemplo anterior de nuevo, de modo que <code>h1</code> solo <code>display</code> si la <code>display</code> es <code>true</code> , pero use el operador lógico <code>&&</code> lugar de una instrucción <code>if/else</code> . </section>
- text: 'Cuando la <code>display</code> se configura como <code>true</code> , se debe <code>display</code> un <code>div</code> , un <code>button</code> y <code>h1</code> .'
- text: 'Cuando la <code>display</code> está configurada en <code>false</code> , solo <code>button</code> debe <code>display</code> un <code>button</code><code>div</code> y.'
testString: 'getUserInput => assert(getUserInput("index").includes("&&"), "The render method should use the && logical operator to check the condition of this.state.display.");'