onChange Not Working in react-select Dropdown within a react-bootstrap Modal and react-draggable Component in React

Question

I'm using the react-select library in a React project to render a dropdown select box. I have defined an options array that contains a single option with the label "a". I have also defined an onChange function that should log the selected option to the console when an option is selected.

Additionally, I'm using the react-bootstrap library's Modal component to create a popup, and the react-draggable library's Draggable component to make the popup draggable.

Here's my code:


import React from "react";
import Select from "react-select";
import Modal from 'react-bootstrap/lib/Modal'
import Draggable from 'react-draggable'

function App() {
  const onChange = (selectedOption) => {
    console.log("Selected Option:", selectedOption);
  };

  const options = [
    {
      label: "a",
    },
  ];

  const style={
    width:"100px",
    height:"100px",
    backgroundColor:"green"
  };  

  return (
    <div>
      <Draggable>
        <Modal show={true}>
          <Modal.Body>
            <div style={style}>Comp</div>
          </Modal.Body>
        </Modal>
      </Draggable>
      <div style={style}>
        Comp2
      </div>
      <Select options={options} onChange={(option) => onChange(option)} />
    </div>
  );
}

export default App;

Despite everything appearing to be set up correctly, when I open the dropdown and select the "a" option, the onChange function is not being called.

Can anyone help me figure out why the onChange function is not being called when an option is selected?

Select seems to be a component, since written with capital 'S'. What happens inside that component does it use the onChange property you send to it? — Thomas Frank
– Thomas Frank, Commented Apr 30, 2023 at 13:31
Thank you for your help, but I am actually looking for a way to make the modal window appear and also be able to use the Select component. — Lupital
– Lupital, Commented May 1, 2023 at 15:34

tejuguasu · Accepted Answer · 2023-04-30 13:34:39Z

0

In the options object, each element must contain a value property.

const options = [
    {
        value: "a",
        label: "a",
    },
];

answered Apr 30, 2023 at 13:34

tejuguasu

113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lupital Over a year ago

This is an example I created to post a code snippet here. The problem is not related to the "options" array but to the fact that the "onChange" function is not being called.

tejuguasu Over a year ago

Try setting the initial value to something, so the option actually changes the selected value.

Prakhar Gupta · Accepted Answer · 2023-04-30 16:22:24Z

0

Everything is working fine, but you need to set your modal show={false} initially.

import React from 'react';
import Select from 'react-select';
import { Modal } from 'react-bootstrap';
import Draggable from 'react-draggable';

export default function App(props) {
  const onChange = selectedOption => {
    console.log('Selected Option:', selectedOption);
  };

  const options = [
    {
      label: 'a',
    },
  ];

  const style = {
    width: '100px',
    height: '100px',
    backgroundColor: 'green',
  };
  return (
    <div>
      <Draggable>
        <Modal show={false}>
          <Modal.Body>
            <div style={style}>Comp</div>
          </Modal.Body>
        </Modal>
      </Draggable>
      <div style={style}>
        Comp2
      </div>

      <Select options={options} onChange={option => onChange(option)} />
    </div>
  );
}

answered Apr 30, 2023 at 16:22

Prakhar Gupta

12 bronze badges

2 Comments

Lupital Over a year ago

Thank you for your help, but I am actually looking for a way to make the modal window appear and also be able to use the Select component.

Prakhar Gupta Over a year ago

When a modal is open Unfortunately, there's no event. you need to check other solutions rather than a modal.

Collectives™ on Stack Overflow

onChange Not Working in react-select Dropdown within a react-bootstrap Modal and react-draggable Component in React

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related