How to set multiple dropdown values to each dynamic element Semantic UI React

Question

I'm having trouble figuring out how to set a dynamic dropdown component with multiple-value selections to each rendered element in a feature I'm working on. I think I'm really close but ultimately need a bit of guidance.

Here's the component:

import React, { Component } from 'react'
import { List, Dropdown, Label } from 'semantic-ui-react'

const directions = [
    {key: "0.0", text: "0.0", value: "0.0"},
    {key: "22.5", text: "22.5", value: "22.5"},
    {key: "45.0", text: "45.0", value: "45.0"},
    {key: "67.5", text: "67.5", value: "67.5"},
    {key: "90.0", text: "90.0", value: "90.0"}
]

const channels = [
    {ch: 65, callsign: "TEST1"},
    {ch: 49, callsign: "TEST2"},
    {ch: 29, callsign: "TEST3"}
]

export default class DirectionalSelection extends Component {
    constructor(props) {
        super(props)

        this.state = {
            channels,
            directions,
            currentValues: {}
        }
    }

    handleDropdownChange = (e, index, { value }) => {
        this.setState(({ currentValues }) => {
            currentValues[index] = value
            return currentValues
        })
    }

    handleDirAddition = (e, index, { value }) => {
        this.setState(({ directions }) => {
            directions[index] = [{ text: value, value }, ...this.state.directions]
            return directions
        })
    }

    render() {
        const { channels, currentValues, directions } = this.state
        return (
            <div>
                <List>
                    {channels.map((el, index) => (
                        <List.Item key={index}>
                            <Label>{el.ch}</Label>
                            <Dropdown
                                search
                                multiple
                                selection
                                scrolling
                                allowAdditions
                                options={directions}
                                value={currentValues[index]}
                                placeholder='Choose directions'
                                onAddItem={this.handleDirAddition.bind(this, index)}
                                onChange={this.handleDropdownChange.bind(this, index)}
                            />
                        </List.Item>
                    ))}
                </List>
            </div>
        )
    }
}

Right now every time I select dropdown values on any channel, currentValues returns as [object Object]: ["22.5", "45.0"] . I want to set the ch key in channels as the key and the dropdown values array as the value and append them to currentValues .

I hope I've clarified the question enough to understand. Here is a link to Semantic-UI-React docs with the original component I'm using: https://react.semantic-ui.com/modules/dropdown#dropdown-example-multiple-allow-additions . Thanks for the help!

Answer 1

I figured it out! It was so simple, just had to switch the params in handleDropdownChange = (e, index, { value }) to handleDropdownChange = (index, e, { value }) . It was setting the event function as the object key.