Change Inline CSS Conditionally Based on Component State, code is right but not passing test

Tell us what’s happening:

  **Your code so far**

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
  let regex = /^\w{0,14}\w?$/;
  if(!regex.test(this.state.input)){
    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>
  );
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Change Inline CSS Conditionally Based on Component State

Link to the challenge:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.