Change Inline CSS Conditionally Based on Component State

JavaScript
1

So, I’m getting this error!!!

The input tag should be styled with a border of 3px solid red if the input value in state is longer than 15 characters.

My 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
      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>
    );
  }
};

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state

1 Like
2

Hi !

Your code is fine. What you have to do is,

Firstly: Use the strict greater than operator > instead of >=

this.state.input.length > 15

Secondly: Remove all white spaces in border:'3px solid red'

Hope this helps!

1 Like
3

nope, it’s not woking same error!!!

4

Let see your new code snippet ?

1 Like
5 
// change code below this line
      if (this.state.input > 15) {
        inputStyle = {
          border:'3px solid red'
        }  
    }
    // change code above this line
6

Okay got it I forgot the length thanks man!!!

7

Pleasure!
Happy coding!

1 Like