Is there any way to trigger a react-select dropdown with jquery from browser?

Question

<select id="selelct-dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

For normal select like this I can change the selected value by using

$('#select-dropdown').val(1)

But when I using react-select there is no select tag nor option tag shown in browser Is there any way to change the react-select dropdown value by jquery?

Answer 1

You don't really need to use jquery, instead maintain the state for field and then set state with the value. As per documentation of react-select:

        import React, { Component, useState } from 'react'
        import Select from 'react-select'
        
        const options = [
          { value: 'chocolate', label: 'Chocolate' },
          { value: 'strawberry', label: 'Strawberry' },
          { value: 'vanilla', label: 'Vanilla' }
        ]
        
        const MyComponent = () => {
          const [value, setValue] = useState('')
          return (
          <Select options={options} value={value} onChange={(e) => 
            setValue(e.target.value)} />
           )
        }
export default MyComponent;