React and SASS - issue with checkbox component not being properly aligned with its label

I'm brand new to React and I'm currently in the process of converting a pure HTML page into a React component. How can I adjust the SASS stylesheet to match the original HTML layout?

Here is my current React setup (the checkbox displays on the right instead of the left, and the alignment between the checkbox and labels is off):

This is how it looked in HTML, which is the desired format:

checkbox.component.jsx

import React from "react";

import './checkbox.styles.scss'

const Checkbox = ({ label, isSelected, onCheckboxChange }) => (
  <div className="form-check">
    <li>
    <label for={label}> {label} </label>
      <input 
        type="checkbox"
        name={label}
        id={label}
        value={label}
        checked={isSelected}
        onChange={onCheckboxChange}
      />
    </li>
  </div>
);

export default Checkbox;

checkbox.styles.scss

.form-check{


li{
    list-style: none;
    margin-left: 15px;
    text-align:left;
}
  label{
     cursor: pointer;    
  }
    
  label:hover{
      background-color:linen;
      text-decoration:underline;
  }

}
javascripthtmlcssreactjssass

Answer №1

To start, you should relocate the div inside the li element as the only valid child element of a list is an li element.

By enveloping the input with the label, not only will you achieve alignment, but you'll also enable users to click the label to toggle the checkbox. I have replaced the React interpolation with static content for demonstration purposes.

ul {list-style: none}

ul li {padding: 8px 0}
<ul>
   <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-1"
          id="form-check-1"
          value="1"
          checked=checked
        />
       $ - $0 - 50 </label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-2"
          id="form-check-2"
          value="2"
        />
       $$ - $51 - 100</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-3"
          id="form-check-3"
          value="3"
        />
       $$$ - $101 - 150</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="checkbox"
          name="form-check-4"
          id="form-check-4"
          value="4"
        />
       $$$$ - $150+</label>
     </div>
    </li>
  </ul>

Additionally, considering that these options seem to be mutually exclusive, using a radio button group would be more suitable. This ensures that only one option can be selected at a time, unlike checkboxes which allow multiple selections (which might not be intended in this scenario).

In the radio button approach (which I recommend), make sure to assign the same name attribute to all instances of the radio input.

ul {list-style: none}

ul li {padding: 8px 0}
<ul>
   <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-1"
          value="1"
          checked=checked
        />
       $ - $0 - 50 </label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-2"
          value="2"
        />
       $$ - $51 - 100</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-3"
          value="3"
        />
       $$$ - $101 - 150</label>
     </div>
    </li>
    <li>
    <div className="form-check">
      <label>
        <input 
          type="radio"
          name="form-check"
          id="form-check-4"
          value="4"
        />
       $$$$ - $150+</label>
     </div>
    </li>
  </ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind encountering these errors while trying to run my Gatsby development server?

I'm currently working on the part three tutorial provided by Gatsby on their official website and I've encountered a problem. Upon executing the command gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world I rec ...

javascriptreactjsnpmgatsby

Is there a way for me to display an alert notification when a website requests access to additional storage on my computer?

Is there a way to set up an alert notification in Internet Explorer when a website requests additional storage on your computer? The notification would ask: Do you want to grant permission for this website to use additional storage on your computer? ...

javascriptjqueryhtml

Leveraging a JavaScript variable declared outside the function to successfully transfer data to my AJAX function

Every time the enter key is pressed, my AJAX function gets executed. I used to pass a set of javascript variables equal to elements in the HTML (the contents of a text area) as data for the AJAX function. Now, I want these JS variables to hold values from ...

javascriptajax

Testing a Svelte Component with Unit Tests { #conditionals }

Test Procedure Instructions To begin, execute the following bash command: mkdir example && cd example && mkdir src && touch jest.config.js && pnpm init && pnpm i @jest/globals @testing-library/svelte jest jest-envi ...

javascriptunit-testingjestjssvelte

modify the color of text in a row within a jquery ajax table

Is it possible to change the font color of values in a row based on a condition inside a function? Specifically, if the TotalStudent count exceeds the room capacity, can we add student information to the table with red font color? Below is my attempt using ...

javascriptjquerycssajax

Issue encountered with the URL for the image in a JSON file following the utilization of multer for image uploads in a Node.js

Using multer to upload images for a blog website. After uploading an image with Postman, the filename is saved in the data.json file under "uploads\" directory. How can I save it as "uploads/" instead of "uploads\"? data.json { "id& ...

javascriptnode.jsjsonmulter

Generating a two-dimensional array and setting its values in JavaScript

I need assistance with creating and initializing a two-dimensional array in JavaScript within an AngularJS application. My current approach is as follows: $scope.invalidVote = []; for (var i = 0; i < $scope.arry1.length; i += 1) { $scope.answersCou ...

javascriptarraysangularjs

Leveraging promises in conjunction with mongoose operations

I'm new to using promises in conjunction with mongoose query functions such as find() and findById(). While everything seems to be functioning correctly, I am unsure if the way I am chaining then is the proper approach. The goal of utilizing promises ...

javascriptnode.jsexpressmongoose

Consolidating multiple inputs into a single saved value

How can I combine three input values into one input field using onchange event in JavaScript? <script type="text/javascript"> function updateInput($i){ $('updateval').val($i); } </script> <input type="text" onchange="updat ...

javascriptjquery

The HTML page is failing to call the function in the JavaScript application

I recently started taking a YouTube Javascript course on chapter 34 titled "Make start button work" Javascript tutorial My HTML, CSS, and Javascript files are all located in the same folder. I am using VS Code along with the Live Server extension for codi ...

javascripthtmlfunctiononclick

Managing the AJAX response from a remote CGI script

I'm currently working on a project that involves handling the response of a CGI script located on a remote machine within a PHP generated HTML page on an apache server. The challenge I am facing relates to user authentication and account creation for ...

javascriptphphtmlajax

Mastering the art of using div boxes in boxing form

When I box in information using divs, I've noticed that sometimes the wrapping boxes don't fill out the space completely. This can result in elements from other wrappers encroaching into the box area. For example: <div> <div style="le ...

htmlcss

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

Currently, I am facing an issue with using Angular2 Router.navigate as it is not functioning as expected. import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import { Router } from '@angular/ ...

javascriptangulartypescriptservicerouter

On smaller screens, the top placement of right sidebar links is necessary

Our website layout is organized into 3 main sections: the top part contains the main menu, followed by the main content and a sidebar specific to each page. The main content and sidebar are structured using bootstrap col-* classes. On small screens, I en ...

javascripthtmlcssbootstrap-4

Can Vue allow for the inclusion of HTML elements to store data seamlessly?

One example involves displaying array elements in an <ul>, with each element starting with <li> and ending with </li>. Here is the attempted code: clearedtaskslist: function(){ this.template='<ul>' for(let i=0;i<t ...

javascriptvue.js

The removeEventListener function is failing to properly remove the keydown event

Every time my component is rendered, I attach an event listener. mounted() { window.addEventListener("keydown", e => this.moveIndex(e)); } Interestingly, even when placed within the moveIndex method itself, the event listener persists and cannot ...

javascriptvue.js

The function inArray() in jQuery will return a value of -1 when an array consists of

When using jQuery inArray, if the array contains only one element, it will return -1. var a = Array(1); console.log($.inArray(1,a)); This result is -1. However, if the array has 2 or more elements, it functions correctly. var a = Array(1,2,3); console.l ...

javascriptjquery

Adjusting Renderer Size in ThreeJS for Fullscreen Display

After creating a ThreeJS application designed for a 4:3 layout with multiple buttons and features, I decided to enable Fullscreen mode using THREEx.Fullscreen.js. Although the Fullscreen mode is functioning properly, a new issue arose - the renderer size(x ...

javascriptcssthree.jsfullscreen

What is the best way to make changes to elements in an express array?

I have been developing an express application that enables users to manage a list of web projects through various HTTP methods such as get, post, put, and delete. So far, I have successfully implemented the logic for handling get, delete, and post reques ...

javascriptexpress

Working with Material UI: How to access child nodes in the <List> component

Imagine I have a hidden cart in my online shop that only appears when I click on the cart icon. Inside the cart, there is a List component containing three items that I have added: <List > <p>item1</p> <p>item2</p> ...

reactjsmaterial-uimaterial-design