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?