Web3uikit - Select component DefaultOption

Moralis General
#1

Hi,

I am trying to insert the value of defaultOptionIndex but it does not work. Below is the Code. Any idea please? My goal is to show currently selected network in the Select component.

<Select
              defaultOptionIndex={`${defaultOption}`}
              label="Select other Chain"
              onChange={(e) => handleNetworkSwitch(e.id)}
              options={[
                {
                  id: 'polygonTST',
                  label: 'Polygon',
                  prefix: <PolygonLogo/>
                },
                {
                  id: 'bsc',
                  label: 'BSC',
                  prefix: <BSCLogo/>
                },
                {
                  id: 'ganache',
                  label: 'Ganace',
                  prefix: <AvaxLogo/>
                }
              ]}
            />
#2

what doesn’t work, did you try with numbers?

#3

When loading page I would like to set up the Default to the connected Network. I am trying to insert index value of the connected network at page load.
With fixed numbers its working just fine. But with variable it doesnt.

thanks

#4

maybe that variable is not set before that code is rendered

#5

yes, it looks like it. But can you help me how set it before rendering. what I did was that I put useEffect at the start of the code:
const [defaultOption, setDefaultOption] = useState()

useEffect(() => {
  if (networkId==5777) {setDefaultOption (0)}
  else if (networkId=97) {setDefaultOption('1')}
  else if (networkId=8001){setDefaultOption('2')}
}, [])

and then rendering:

<Select
              defaultOptionIndex={`${defaultOption && defaultOption}`}
              label="Select other Chain"
              onChange={(e) => handleNetworkSwitch(e.id)}
              options={[
                {
                  id: 'polygonTST',
                  label: 'Polygon',
                  prefix: <PolygonLogo/>
                },
                {
                  id: 'bsc',
                  label: 'BSC',
                  prefix: <BSCLogo/>
                },
                {
                  id: 'ganache',
                  label: 'Ganace',
                  prefix: <AvaxLogo/>
                }
              ]}
            />
#6

you can see here how to post code on forum: READ BEFORE POSTING - How to post code in the forum

1 Like
#7

There is also a channel in discord where you can ask questions specific to web3uikit