Question regarding React and rendering

Question regarding React and rendering
0

#1

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?


#2

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


#3

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?


#4

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


#5

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