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>
 | |
|     );
 | |
|   }
 | |
| };
 | |
| ```
 |