Using react-select in dashAgGridFunctions.js

Dash Python
1

Hi team,
I’d like to build a React dropdown multselect element, using react-select. This is my first try:

const selectElement = React.createElement('Select', {style: selectStyle, onChange: handleChange, isMulti:true, hideSelectedOptions:false}, selectOptions);

this does not work as it takes ‘Select’ as ‘select’.
To fix this issue I added this:

import Select from 'react-select'

this does not work too, my. guess is because I should npm install it somehow.

Would you please give me some hints?

Thanks,

2

Hello @231530353,

Why are you using react vs dmc?

Anyways, to use react select from JS you need to find where you can get the package for JS and not react. Normally you can do a cdn or something that you add to your external scripts.

If you are doing react, then you need to have something that will bundle the package and put it into a namespace for you to pick up.

The nice thing about other dash components is that these already exist in namespaces if your app uses them.

3

Hi @jinnyzor …thanks for your reply.

The reason to create my own react component is I need to have a drop down list appended to each row of my ag grid if a condition is satisfied. I could not get any other solution worked but creating my own React Element:

image
image770×480 36.2 KB

Now my business partner asked for multi select which is nicer using react-select.

4

You are currently rendering a basic Select element and providing options?

You should have been able to meet these needs using other dash components. XD

Anyways, you’ll need to do what I said in order to get the react-select component.

This might help:

5

Thanks a lot for your help.