| 
									
										
										
										
											2018-10-04 14:47:55 +01:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Use the Lifecycle Method componentDidMount | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Use the Lifecycle Method componentDidMount
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-16 14:23:57 +05:30
										 |  |  | This challenges introduces the ``` componentDidMount ``` Lifecycle method. This is used to set state after a giventime period. | 
					
						
							| 
									
										
										
										
											2018-10-04 14:47:55 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-16 14:23:57 +05:30
										 |  |  | The syntax for the method is: | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | componentDidMount() { | 
					
						
							|  |  |  |     setTimeout( () => { | 
					
						
							|  |  |  |       this.setState({ | 
					
						
							|  |  |  |         one: 1, | 
					
						
							|  |  |  |         two: false | 
					
						
							|  |  |  |       }); | 
					
						
							|  |  |  |     }, interval); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | where ``` one ``` and ``` two ``` are states you want to set after ``` interval ```ms. | 
					
						
							| 
									
										
										
										
											2018-10-04 14:47:55 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-16 14:23:57 +05:30
										 |  |  | ### Hint
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Use | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | this.state.stateName | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | and change ``` stateName ``` as required. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Solution
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Change | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | render() { | 
					
						
							|  |  |  |     return ( | 
					
						
							|  |  |  |       <div> | 
					
						
							|  |  |  |         <h1>Active Users: { /* change code here */ }</h1> | 
					
						
							|  |  |  |       </div> | 
					
						
							|  |  |  |     ); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | to  | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```javascript | 
					
						
							|  |  |  | render() { | 
					
						
							|  |  |  |     return ( | 
					
						
							|  |  |  |       <div> | 
					
						
							|  |  |  |         <h1>Active Users: { this.state.activeUsers }</h1> | 
					
						
							|  |  |  |       </div> | 
					
						
							|  |  |  |     ); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | ``` |