freeCodeCamp/guide/spanish/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md

title	localeTitle
Change Inline CSS Conditionally Based on Component State	Cambiar CSS en línea condicionalmente basado en el estado del componente

Cambiar CSS en línea condicionalmente basado en el estado del componente

Sugerencia 1:

Vas a verificar la longitud de this.state.input así que usa su propiedad .length .

this.state.input.length 

Sugerencia 2:

Usted está ingresando el código antes de la declaración de retorno, por lo que puede usar un código JavaScript puro if/then .

Solución:

Utilizará una instrucción if/then para verificar el valor de this.state.input.length . Si es más largo que 15, asigne '3px solid red' a inputStyle.border .

class GateKeeper extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      input: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
  } 
  handleChange(event) { 
    this.setState({ input: event.target.value }) 
  } 
  render() { 
    let inputStyle = { 
      border: '1px solid black' 
    }; 
    // change code below this line 
    if (this.state.input.length > 15) { 
      inputStyle.border = '3px solid red'; 
    } 
    // change code above this line 
    return ( 
      <div> 
        <h3>Don't Type Too Much:</h3> 
        <input 
          type="text" 
          style={inputStyle} 
          value={this.state.input} 
          onChange={this.handleChange} /> 
      </div> 
    ); 
  } 
 }; 

Solución

Escriba una declaración condicional que se evalúe de acuerdo con su estado, como se menciona en la descripción del desafío, verifique la longitud de la entrada y asigne un nuevo objeto a la variable inputStyle.

if (this.state.input.length > 15) { 
  inputStyle = { 
    border: '3px solid red' 
  } 
 }