Long Phan Long Phan - 1 year ago 170
React JSX Question

trying to make a React dropdown with checkbox options in it and its not working properly

I am trying to make a simple dropdown with dropdown items as checkbox inputs. Currently I have this :

import React, { Component } from 'react'
export default class Sort extends Component {
constructor() {
this.state= { expanded : false}

showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
this.state.expanded = true;
} else {
checkboxes.style.display = "none";
this.state.expanded = false;
render() {
return (
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<option>Select an option</option>
<div class="overSelect"></div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>First checkbox</label>
<label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
<label for="three"><input type="checkbox" id="three"/>Third checkbox</label>

But It ends up having an empty dropdown with multiple checkbox fields under the dropdown, I would like to have it within the dropdown if possible.

Answer Source

Having checkboxs as options inside a select is not possible. You need to create your own component to do this.

Else, you can try react-select

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download