Tengo esta función en mi home.jsx:

 function GridListComponent(options) { return ( <li> <input type="checkbox" id={options.id} /> <label htmlFor={options.id}>{options.tileInfo}</label> </li> ); } function Home() { return ( <div className="home"> <div class="container"> <div class="row align-items-center my-5"> <div class="col-lg-12"> <h1 class="font-weight-light">Site Setting</h1> <p>Pillar Selection:</p> </div> <ul className="grid"> <GridListComponent id="grid-opt-1" tileInfo="A" /> <GridListComponent id="grid-opt-2" tileInfo="B" /> <GridListComponent id="grid-opt-3" tileInfo="C" /> <GridListComponent id="grid-opt-4" tileInfo="D" /> </ul> </div> </div> <hr /> </div> ); }

Y funciona bien. Todo lo que necesito es preseleccionar 1 o 2 opciones. Actualmente, una vez que se carga la página, veo esto: pageLoads

Y esto es lo que sucede al hacer clic: preseleccionar

así que todo lo que necesito es tener A y C preseleccionados.