CheckBox comments
This commit is contained in:
		
							parent
							
								
									7502591022
								
							
						
					
					
						commit
						c8a8ffaf0a
					
				
					 1 changed files with 9 additions and 6 deletions
				
			
		|  | @ -1,25 +1,28 @@ | ||||||
| import React from 'react'; | import React from 'react'; | ||||||
| 
 | 
 | ||||||
|  | // Define the props for the CheckboxSetting component
 | ||||||
| interface CheckboxSettingProps { | interface CheckboxSettingProps { | ||||||
|   label: string; // The label to display
 |   label: string; // The label to display
 | ||||||
|   checked: boolean; // The checked state of the checkbox
 |   checked: boolean; // The checked state of the checkbox
 | ||||||
|   setChecked: (value: boolean) => void; // Method to update the state
 |   setChecked: (value: boolean) => void; // Method to update the state
 | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | // Functional component definition
 | ||||||
| const CheckboxSetting: React.FC<CheckboxSettingProps> = ({ label, checked, setChecked }) => { | const CheckboxSetting: React.FC<CheckboxSettingProps> = ({ label, checked, setChecked }) => { | ||||||
|  |   // Handler to toggle the checkbox state
 | ||||||
|   const handleCheckboxChange = () => { |   const handleCheckboxChange = () => { | ||||||
|     setChecked(!checked); |     setChecked(!checked); // Toggle the checked state
 | ||||||
|   }; |   }; | ||||||
| 
 | 
 | ||||||
|   return ( |   return ( | ||||||
|     <div className="settings-option"> |     <div className="settings-option"> {/* Container for the checkbox setting */} | ||||||
|       <label> |       <label> | ||||||
|         <input |         <input | ||||||
|           type="checkbox" |           type="checkbox" // Checkbox input type
 | ||||||
|           checked={checked} |           checked={checked} // Set the checked state based on the prop
 | ||||||
|           onChange={handleCheckboxChange} |           onChange={handleCheckboxChange} // Call the handler on change
 | ||||||
|         /> |         /> | ||||||
|         {label} |         {label} {/* Display the label next to the checkbox */} | ||||||
|       </label> |       </label> | ||||||
|     </div> |     </div> | ||||||
|   ); |   ); | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue