'react js + reactstrap + bootstrap-select

I'm trying to use the + bootstrap + bootstrap-select. I've successfully changed the select dropdown to bootstrap-select but the click event's aren't getting triggered.

import React, { useEffect, useRef, createRef,forwardRef } from 'react';
import { Modal, ModalHeader, ModalBody, ModalFooter, Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import $ from 'jquery';
import 'bootstrap-select/dist/js/bootstrap-select.min.js';
import 'bootstrap-select/dist/css/bootstrap-select.min.css';

const AddPModal = ({ addPModalShow, hideModal }) => {

  const handleSelectPicker = ()=>{
    console.log($('#add_tag').selectpicker());
  }
    return (
      <Modal size="lg" isOpen={addPModalShow} centered={true} onOpened={handleSelectPicker}>
      <ModalHeader>Add New Prospect</ModalHeader>
      <ModalBody>
        <Form>
          <Row form>
            <Col md={6}>
              <FormGroup>
                <Label for="add_tag">tag</Label>
                <select name="tag" id="add_tag" className="form-control">
                  <option>1</option>
                  <option>2</option><option>3</option>
                </select>
              </FormGroup>
            </Col>
          </Row>
        </Form>
      </ModalBody>
      <ModalFooter>
        <Button color="primary">Save</Button>
        <Button color="secondary" onClick={hideModal}>Cancel</Button>
      </ModalFooter>
    </Modal>
    );
}

export default AddPModal;
kubernetesdevopsaffinity


Solution 1:[1]

...
<select name="tag" id="add_tag" className="form-control selectpicker">
    <option>1</option>
    <option>2</option><option>3</option>
</select>
...

Add selectpicker class to your select elements to auto-initialize bootstrap-select. For more info click here

Solution 2:[2]

Even you can use:

useEffect(() => {
    $("#mySelect").selectpicker("refresh");
}, []);

To initialize your selectpicker element (it will render properly) - it will not work as the jquery event handlers are not called (required for all functionality.

Best is to avoid jquery in your react project.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user8551588
Solution 2 pizzamonster

Related Questions