I'm using a dropdown from semantic-ui-react. The semantic-ui dropdown is in my Artists component and that component is being used its parent component, App.

Right now the dropdown is working fine, if you select a name (artist) from the dropdown then the handleArtistSelection function is called with that artist's name passed into it. Most of the code is below.

But is there another way to set the value of the dropdown? For example in jquery you can use:

$("#mydropdownlist").val("thevalue").change();

App Component

export default function App() {

     const handleArtistSelection = (artist) => {
        ...
     };

     const artistOptions = artistArray.map((artist) => { return {text: artist, value: artist} });

     return (
        <div className="App">
          <h1>Explore Music Award Show Winners</h1>
          <Artists options={artistOptions} onArtistChange={handleArtistSelection} placeholder={'Pick an artist'}/>
        </div>
     )

}

Artists Component:

import {Dropdown} from 'semantic-ui-react';

export default function Artists (props) {

    const handleOnChange = (e, data) => {
        props.onArtistChange(data.value);
    }

    return(
        <Dropdown placeholder={props.placeholder} search selection options={props.options} onChange={handleOnChange}/>
    )
}