54 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
		
		
			
		
	
	
			54 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
|   | --- | ||
|  | title: Render State in the User Interface Another Way | ||
|  | --- | ||
|  | ## Render State in the User Interface Another Way
 | ||
|  | 
 | ||
|  | #### Hint 1:
 | ||
|  | ```JSX | ||
|  | class MyComponent extends React.Component { | ||
|  |   constructor(props) { | ||
|  |     super(props); | ||
|  |     this.state = { | ||
|  |       name: 'freeCodeCamp' | ||
|  |     } | ||
|  |   } | ||
|  |   render() { | ||
|  |     // change code below this line | ||
|  |             // Remember that how you can access the property of a state. | ||
|  |     // change code above this line | ||
|  |     return ( | ||
|  |       <div> | ||
|  |         { /* change code below this line */ } | ||
|  |             // Just use the const "name" inside the h1 tag. | ||
|  |             // Dont forget to use JSX syntax "{ curly braces for JavaScript }". | ||
|  |         { /* change code above this line */ } | ||
|  |       </div> | ||
|  |     ); | ||
|  |   } | ||
|  | }; | ||
|  | ``` | ||
|  | 
 | ||
|  | ## Solution
 | ||
|  | ```JSX | ||
|  | class MyComponent extends React.Component { | ||
|  |   constructor(props) { | ||
|  |     super(props); | ||
|  |     this.state = { | ||
|  |       name: 'freeCodeCamp' | ||
|  |     } | ||
|  |   } | ||
|  |   render() { | ||
|  |     // change code below this line | ||
|  |     const name = this.state.name; | ||
|  |     // change code above this line | ||
|  |     return ( | ||
|  |       <div> | ||
|  |         { /* change code below this line */ } | ||
|  |           <h1>{name}</h1> | ||
|  |         { /* change code above this line */ } | ||
|  |       </div> | ||
|  |     ); | ||
|  |   } | ||
|  | }; | ||
|  | ``` |