How to use checkbox inside select options? React hook

Question

Currently I'm trying to create this design.

It doesn't open and close as expected. I also created a codesandbox

Three things:
1. I have a onClick, but I'm not sure if my logic is correct to open and close the button.Also should there be a useEffect here to listen to changes?

const showPlatformOptions =()=> {
  //  let checkboxes = el;
  //  console.log("ref:",myRef.current)
  //   if (!expanded) {
  //    //checkboxes.style.display = "block";
  //     setExpanded(true);
  //   } else {
  //   // checkboxes.style.display = "none";
  //     setExpanded(false);
  //   }


  }

2. I have a onChange called selectionOptions that should let me know which platforms are selected, but it currently only shows one platform at a time, why?

3. Is there another way to create this dropdown and checkbox. Maybe a library using hooks?

Any help is appreciated.

import React, { useState,useEffect, useRef} from "react";


const SearchBar =()=>{
  const [query, setQuery] = useState("");
  const [expanded,setExpanded] = useState(false);
  const [selectionOptions, setSelectionOptions] = useState(["Instagram","LinkedIn","Twitter"]);
  const myRef = useRef(null);

  const showPlatformOptions =()=> {
  //  let checkboxes = el;
  //  console.log("ref:",myRef.current)
  //   if (!expanded) {
  //    //checkboxes.style.display = "block";
  //     setExpanded(true);
  //   } else {
  //   // checkboxes.style.display = "none";
  //     setExpanded(false);
  //   }


  }

  const handleQueryChange = event => {
    console.log("Event:",event.target.value)
    setQuery(event.target.value);
  };

  return (
    <form onSubmit={showPlatformOptions}>
      <div className="w-64">
        <div className="relative" onClick={showPlatformOptions}>
          <h6>PLATFORMS </h6>
          <select className="w-full font-semibold"  onChange={handleQueryChange}>
              {selectionOptions.map((platform,x) => (
                  <option key={x} value={platform}>
                      {platform}
                  </option>
              ))}
          </select>
          <div className="absolute left-0 right-0 top-0 bottom-0"></div>
        </div>
        <div 
        ref={myRef}
        className="checkboxes border-gray-200 border border-solid">
          <label htmlFor="one" className="block ">
            <input type="checkbox" id="one" onChange={handleQueryChange} className="m-3"/>
            Instagram</label>
          <label htmlFor="two" className="block">
            <input type="checkbox" id="two" onChange={handleQueryChange} className="m-3"/>
            LinkedIn</label>
          <label htmlFor="three" className="block">
            <input type="checkbox" id="three" onChange={handleQueryChange} className="m-3"/>
            Twitter</label>
        </div>
      </div>
    </form>
  );
}

Answer 1

You're really close with your logic and code so far so well done! I'll answer your questions in order:

1. I have a onClick, but I'm not sure if my logic is correct to open and close the button.Also should there be a useEffect here to listen to changes?

Yep your logic to toggle the hide and show of the dropdown is spot on. The only thing is you don't have to worry about CSS there. You can use this boolean to display or hide the dropdown when the state changes.

2. I have a onChange called selectionOptions that should let me know which platforms are selected, but it currently only shows one platform at a time, why?

Good question, the reason for this is because its firing on the change of "each" checkbox. As you change checkboxes you'll see the event fire and just show the value for the new checkbox. The checkbox itself is what the event.target refers to. Not the whole form

3. Is there another way to create this dropdown and checkbox. Maybe a library using hooks?

I don't think you'll need to in this case. I took your code sandbox and enhanced it with just a couple additional bits of code to show how close you were!

Here it is

I'll point out a couple of changes i made:

1. Instead of dealing with CSS I used your expanded variable to determine if I should render the dropdown. This conditional logic is on line 50.

2. Because you want to keep track of all the different queries I changed the query variable to keep track of which queries were selected in an array. The logic for this is on line 26, but basically if the user unticks a checkbox I remove it from the array (if its there) and if they check it I add it to the array (if its not there).

I hope this helps you out!