Question regarding React and rendering

I´m trying to test something, by typing console.log(this.state.input), outside of the React component:

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
    const char=15;
    if(this.state.input.length> char) {
      {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>
    );
  }
};

console.log(this.state.input);

But this stops the rendering of the object altogether. Why does this happen?

this.state.input doesn’t exist outside of the class. You’re trying to log something that doesn’t exist and whatever running the code is falling over because of that

1 Like

Thank you for the reply. But why does adding that console statement outside of the class stop rendering altogether? Shouldn´t it just disregard it?

I don’t know where you’re running the code or what the rest of the code looks like, so I couldn’t say. If it’s just in the FCC editor, it will just be throwing an error somewhere, which will cause it to break

On here: https://learn.freecodecamp.org/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state