import React, { Component } from 'react'; import { Frame } from 'framer'; import Cookies from 'js-cookie'; class CheckBoxComponent extends Component { constructor(props) { super(props); this.state = { checkboxes: [ { id: 'checkbox1', label: 'Option 1', checked: false }, { id: 'checkbox2', label: 'Option 2', checked: false }, { id: 'checkbox3', label: 'Option 3', checked: false }, ], }; } componentDidMount() { this.loadCookies(); } loadCookies() { const { checkboxes } = this.state; const updatedCheckboxes = checkboxes.map((checkbox) => { const cookieValue = Cookies.get(checkbox.id); if (cookieValue) { return { ...checkbox, checked: cookieValue === 'true' }; } return checkbox; }); this.setState({ checkboxes: updatedCheckboxes }); } handleCheckboxChange(e, checkbox) { const { checkboxes } = this.state; const updatedCheckboxes = checkboxes.map((item) => item.id === checkbox.id ? { ...item, checked: e.target.checked } : item ); this.setState({ checkboxes: updatedCheckboxes }); Cookies.set(checkbox.id, e.target.checked); } render() { const { checkboxes } = this.state; return ( <Frame size="100%" background="white"> <div> {checkboxes.map((checkbox) => ( <div key={checkbox.id}> <input type="checkbox" id={checkbox.id} checked={checkbox.checked} onChange={(e) => this.handleCheckboxChange(e, checkbox)} /> <label htmlFor={checkbox.id}>{checkbox.label}</label> </div> ))} </div> </Frame> ); } } export default CheckBoxComponent;