* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
		
			
				
	
	
		
			54 lines
		
	
	
		
			865 B
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			54 lines
		
	
	
		
			865 B
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| ---
 | |
| title: Pass Props to a Stateless Functional Component
 | |
| ---
 | |
| # Pass Props to a Stateless Functional Component
 | |
| 
 | |
| 
 | |
| ---
 | |
| ## Hints
 | |
| 
 | |
| ### Hint 1
 | |
| 
 | |
| Define a prop named date in the Calendar component as follows:
 | |
| 
 | |
| ```jsx
 | |
| <CurrentDate date={Date()} />
 | |
| ```
 | |
| 
 | |
| ### Hint 2
 | |
| 
 | |
| The syntax prop.propName is used to render a prop.
 | |
| 
 | |
| 
 | |
| ---
 | |
| ## Solutions
 | |
| 
 | |
| <details><summary>Solution 1 (Click to Show/Hide)</summary>
 | |
| 
 | |
| Assign a prop named date in the Calendar component as follows and render it in the Calendar component, like:
 | |
| 
 | |
| ```jsx
 | |
| const CurrentDate = (props) => {
 | |
|   return (
 | |
|     <div>
 | |
|       <p>The current date is: {props.date}</p>
 | |
|     </div>
 | |
|   );
 | |
| };
 | |
| 
 | |
| class Calendar extends React.Component {
 | |
|   constructor(props) {
 | |
|     super(props);
 | |
|   }
 | |
|   render() {
 | |
|     return (
 | |
|       <div>
 | |
|         <h3>What date is it?</h3>
 | |
|         <CurrentDate date={Date()} />
 | |
|       </div>
 | |
|     );
 | |
|   }
 | |
| };
 | |
| ```
 | |
| 
 | |
| </details> |