Long Phan Long Phan - 2 months ago 14
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() {
super()
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 (
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</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>
</div>
</div>
</form>
)
}
}


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

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