how to get value from select2 in reactjs

I am using adminlte HTML theme, I converted this theme into reactjs, everything is working fine except select2(Multi-select)

onselect I am trying to trigger the handler that is userIdHandler but it does not trigger

There is two cases:

1. user name with multi-select : userIdHandler not working
2. Status with single select: userIdHandler working

please help me to trigger userIdHandler from multi-select also

import React, { useEffect, useState } from "react";
import { getTeam } from "../services/ApiCall/attendanceApiCall";

export default function TeamattendanceComponent() {
  const [team, setTeam] = useState([]);

  const userIdHandler = (e) => {
    console.log("hi", e.target.value);
  };

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "myjs/content.js";
    script.async = true;
    document.body.appendChild(script);

    getTeam().then((res) => {
      console.log(res.data);
      setTeam(res.data);
    });
  }, []);
  return (
    <div className="content-wrapper">
      {/* Content Header (Page header) */}
      <div className="card">
        <div className="card-body row">
          <div className="col-4">
            <div className="form-group ">
              <label>User Name</label>
              
              <select
                id
                className="form-control select2"
                multiple="multiple"
                data-placeholder="Select a State"
                style={{ width: "100%" }}
                onChange={userIdHandler}
              >
                {team.map((user, key) => {
                  console.log("team data", team);
                  return (
                    <option key={key} value={user._id}>
                      {user.name}
                    </option>
                  );
                })}
              </select>
            </div>
          </div>

          <div className="col-4">
            <div className="form-group">
              <label>Status</label>
              <select id className="form-control" onChange={userIdHandler}>
                <option>Select</option>
                <option>ON</option>
                <option>OFF</option>
              </select>
            </div>
          </div>

          <div className="col-4">
            <div className="form-group">
              <label className="hidden-xs">&nbsp;</label>
              <input
                type="submit"
                className="btn btn-primary form-control"
                defaultValue="Filter"
              />
            </div>
          </div>
        </div>
      </div>
      {/* /.content */}
    </div>
  );
}

Answer

I’m afraid that you are not using a Select2 elements that’s a regular select.

First install react-select: npm i --save react-select

This is how you define a multiselect on Select2:

import Select from 'react-select';

const options = [{label: "option 1", value: 1}, {label: "option 2", value: 2}];

<Select
    isMulti
    options={options}
    onChange={userIdHandler}
  />

And then change your userIdHandler` function to this:

const userIdHandler = (value) => {
    console.log(value);
  };

This way it should print you the label and value selected.