Chapter 8 counter code not working

programming web dev
1

I am unable to get the code to display counter. I tried out the code and am getting error that “cannot read property strikes of undefined”

below is the source code

React!React!React! #container{ padding:50px; background-color:#FFF; } 
	</style>
</head>

<body>
	<div id="container"></div>
	<script type="text/babel">
	
	var destination = document.querySelector("#container");

	class LightningCounter extends React.Component{
		constructor(props, context){
			super(props, context);
			
			this.state = {
				strikes: 0
			};
		}
		
		timerTick() {
			this.setState({strikes: this.state.strikes +  100});
		}
		
		componentDidMount(){
			setInterval(this.timerTick,1000);
		}
		render(){
						
			return(<h1>{this.state.strikes}</h1>);
		}
	}
	
	class LightningCounterDisplay extends React.Component{
		render(){
			var divStyle={
			width:250,
			textAlign:"center",
			backgroundColor:"black",
			padding:40,
			fontFamily:"sans-serif",
			color:"#999",
			borderRadius:10
		};
		
			return(<div style={divStyle}><LightningCounter/></div>);
		}
	}
	
	
	
	ReactDOM.render(<div><LightningCounterDisplay /></div>,destination);
	
	
	</script>
</body>
2

You’re losing context in your setTimeout. You can fix this by wrapping it in an arrow function

    setInterval(() => this.timerTick,1000);

This ensures timerTick is called off of this and not called as a standalone function reference where this becomes undefined (or window if not in strict mode).