| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Render State in the User Interface | 
					
						
							|  |  |  | --- | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | # Render State in the User Interface
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | In the challenge, you will need to render a state value in `<h1>` tag, pretty simple. | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Hints
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Hint 1
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | Just make a `<h1>` tag and render `this.state.name` between tag. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Solutions
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <details><summary>Solution 1 (Click to Show/Hide)</summary> | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-05-15 10:08:19 -07:00
										 |  |  | ```jsx | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | class MyComponent extends React.Component { | 
					
						
							|  |  |  |   constructor(props) { | 
					
						
							|  |  |  |     super(props); | 
					
						
							|  |  |  |     this.state = { | 
					
						
							|  |  |  |       name: 'freeCodeCamp' | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   render() { | 
					
						
							|  |  |  |     return ( | 
					
						
							|  |  |  |       <div> | 
					
						
							|  |  |  |         { /* change code below this line */ } | 
					
						
							|  |  |  |         <h1>{this.state.name}</h1> | 
					
						
							|  |  |  |         { /* change code above this line */ } | 
					
						
							|  |  |  |       </div> | 
					
						
							|  |  |  |     ); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | </details> |