46 lines
		
	
	
		
			805 B
		
	
	
	
		
			Markdown
		
	
	
	
	
	
		
		
			
		
	
	
			46 lines
		
	
	
		
			805 B
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| 
								 | 
							
								---
							 | 
						||
| 
								 | 
							
								title: Create a Stateful Component
							 | 
						||
| 
								 | 
							
								---
							 | 
						||
| 
								 | 
							
								## Create a Stateful Component
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								#### Hint 1 :
							 | 
						||
| 
								 | 
							
								```JSX
							 | 
						||
| 
								 | 
							
								class StatefulComponent extends React.Component {
							 | 
						||
| 
								 | 
							
								  constructor(props) {
							 | 
						||
| 
								 | 
							
								    super(props);
							 | 
						||
| 
								 | 
							
								    // initialize state here
							 | 
						||
| 
								 | 
							
								        // "This" area may be a good place to use "dot" notation.
							 | 
						||
| 
								 | 
							
								        // dont forget to describe "name" property inside the state and assign your name to a property of "name". 
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								  render() {
							 | 
						||
| 
								 | 
							
								    return (
							 | 
						||
| 
								 | 
							
								      <div>
							 | 
						||
| 
								 | 
							
								        <h1>{this.state.name}</h1>
							 | 
						||
| 
								 | 
							
								      </div>
							 | 
						||
| 
								 | 
							
								    );
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Solution 
							 | 
						||
| 
								 | 
							
								```JSX
							 | 
						||
| 
								 | 
							
								class StatefulComponent extends React.Component {
							 | 
						||
| 
								 | 
							
								  constructor(props) {
							 | 
						||
| 
								 | 
							
								    super(props);
							 | 
						||
| 
								 | 
							
								    // initialize state here
							 | 
						||
| 
								 | 
							
								    
							 | 
						||
| 
								 | 
							
								    this.state = {
							 | 
						||
| 
								 | 
							
								      name : "Name"
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								  render() {
							 | 
						||
| 
								 | 
							
								    return (
							 | 
						||
| 
								 | 
							
								      <div>
							 | 
						||
| 
								 | 
							
								        <h1>{this.state.name}</h1>
							 | 
						||
| 
								 | 
							
								      </div>
							 | 
						||
| 
								 | 
							
								    );
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								};
							 | 
						||
| 
								 | 
							
								```
							 |