React - Change Inline CSS Conditionally Based on Component State

Tell us what’s happening:

why does this doesnt’work?..(ik the solution for this step dw)

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:{this.state.input.length >15 ? "3px solid red" : "4px solid blue"}
    }
    // Change code below this line
    
    // 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; rv:126.0) Gecko/20100101 Firefox/126.0

Challenge Information:

React - Change Inline CSS Conditionally Based on Component State

Welcome to the forum @dmunir541

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

Try entering code between the comments.

Happy coding

ik…was just asking that why’s mine not working…like it should change the borders ig

this is a javascript object, you can give a value to the border property using a ternary operator, but you can’t use the graph parenthesis here, it isn’t jsx