| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Pass Props to a Stateless Functional Component | 
					
						
							|  |  |  | --- | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | # Pass Props to a Stateless Functional Component
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Hints
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ### Hint 1
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Define a prop named date in the Calendar component as follows: | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | ```jsx | 
					
						
							|  |  |  | <CurrentDate date={Date()} /> | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | ``` | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | ### Hint 2
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The syntax prop.propName is used to render a prop. | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											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
										 |  |  | 
 | 
					
						
							|  |  |  | 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> | 
					
						
							|  |  |  |     ); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | }; | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2019-07-24 00:59:27 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | </details> |