freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/use--for-a-more-concise-conditional.spanish.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036185	Use && for a More Concise Conditional	6	false		Use && para un condicional más conciso

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 else if instrucciones, else if 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 && para realizar la lógica condicional de una manera más concisa. Esto es posible porque desea verificar si una condición es true y, si lo es, devolver algún margen de beneficio. Aquí hay un ejemplo: {condition && <p>markup</p>} Si la condition es true , se devolverá la marca. Si la condición es false , la operación devolverá inmediatamente false después de evaluar la condition y no devolverá nada. Puede incluir estas declaraciones directamente en su JSX y encadenar varias condiciones juntas escribiendo && después de cada una. Esto le permite manejar una lógica condicional más compleja en su método render() sin repetir mucho código.

Instructions

Resuelva el ejemplo anterior de nuevo, de modo que h1 solo display si la display es true , pero use el operador lógico && lugar de una instrucción if/else .

Tests

tests:
  - text: <code>MyComponent</code> debería existir y renderizarse.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length; })(), "<code>MyComponent</code> should exist and render.");'
  - 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> .'
    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(updated.find("div").length === 1 && updated.find("div").children().length === 2 && updated.find("button").length === 1 && updated.find("h1").length === 1, "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render."); }; '
  - 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: '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(updated.find("div").length === 1 && updated.find("div").children().length === 1 && updated.find("button").length === 1 && updated.find("h1").length === 0, "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render."); }; '
  - text: El método de representación debe utilizar el operador lógico && para verificar la condición de this.state.display.
    testString: 'getUserInput => assert(getUserInput("index").includes("&&"), "The render method should use the && logical operator to check the condition of this.state.display.");'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: true
    }
    this.toggleDisplay = this.toggleDisplay.bind(this);
  }
  toggleDisplay() {
    this.setState({
      display: !this.state.display
    });
  }
  render() {
    // change code below this line
    return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required