React - Change Inline CSS Conditionally Based on Component State

JavaScript
1

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

2

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.

image
image866×464 28.2 KB

Try entering code between the comments.

Happy coding

3

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

4

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

5

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