Form.Select value onChange Semantic UI React

Question

I need to get the value from Form.Select onChange, and also need it to persist from the value property.

Form

            <Form onSubmit={submitSSOLink}>
                <Form.Group widths='equal'>
                    <Form.Input required={true} onChange={(e) => updateInput(e,"name")} fluid label='Name' placeholder='Gitlab' value={name} />
                    <Form.Input required={true} onChange={(e) => updateInput(e,"link")} fluid label='Link Url' placeholder='https://www.gitlab.com' type="url" value={link} />
                </Form.Group>
                <Form.Group>
                    <Form.Select
                        fluid
                        label='Category'
                        placeholder='Category'
                        options={options}
                        onChange={(e:any) => updateInput(e,"category")}
                        required={true}
                        value={category}
                    />
                </Form.Group>
                <Form.Group widths='equal'>
                <Form.Input required={true} onChange={(e) => updateInput(e, "owner")} fluid label='Owner' placeholder='Ian Malcolm'  value={owner} />
                <Form.Input required={true} onChange={(e) => updateInput(e,"ownerEmail")} fluid label='Owner Email' placeholder='[email protected]' type="email" value={ownerEmail} />
                </Form.Group>
                <Form.TextArea required={true} onChange={(e) => updateInput(e,"description")} fluid label='Description' placeholder='Fantastic resource' type="text" value={description} />
                <Button type='submit'>Submit</Button>
            </Form>

updateInput (MOBX Store)

@action updateInput = async (e:any, fieldName:string) => {
    this.loadingStatus = true;
    console.log(e.currentTarget)
    try {
        runInAction('updating field value', () => {
            switch(fieldName) {
                case "name":
                    this.name = e.currentTarget.value;
                    break;
                case "link":
                    this.link = e.currentTarget.value;
                    break;
                case "category":
                    this.category = e.currentTarget.value;
                    break;
                case "owner":
                    this.owner = e.currentTarget.value;
                    break;
                case "ownerEmail":
                    this.ownerEmail = e.currentTarget.value;
                    break;
                case "description":
                    this.description = e.currentTarget.value;
                    break;
            }
        })
        console.log(e.currentTarget.getAttribute('value'))
    } catch (error) {
        console.log(error);
        this.loadingStatus = false;
    }
}

Right now it always returns null. When returning just currentTarget it shows a div element and a inside. Perhaps this is causing the value to be undefined? What is the best way to capture / persist the value of Form.Select onChange?

Answer 1

I ended up stumbling across an issue on GitHub that helped me out. Just putting it here in case someone comes across the same issue.

https://github.com/Semantic-Org/Semantic-UI-React/issues/798

<Form.Select
    fluid
    label='Category'
    placeholder='Category'
    options={options}
    onChange={(e:any, {value}) => updateCategory(e, value?.toString())}
    required={true}
    value={category}
/>

Created another action in my store

@action updateCategory = async (e:any, value: string|undefined) => {
    this.loadingStatus = true;
    try {
        runInAction('updating category', () => {
            if (value != undefined) {
                this.category = value;
            }
            console.log(value);
        })
    } catch (error) {
        console.log(error)
        this.loadingStatus = false;
    }
}