Let's say I have a function which returns a dropdown. This function gets called from some parent, where the parent passes in props including a state key, array, and onChange. The dropdown is created dynamically from the items in the array. What I want to happen is, when an option in the dropdown is selected, the parents passed in state key gets updated to the value of whatever was selected. Currently, I am trying to do this by setting an onClick handler per , which doesn't work. Instead, I am met with either no or undefined values (described more below).

Example flow:

• Parent passes in aStateKey (actual state key), an array to be used as dropdown values, and an onChange function to be used to update aStateKey
• The dropdown menu is created from the passed inarray
• A dropdown item is selected
• aStateKey (which was passed in as a prop) gets updated via the passed in onChange function.

I understand that the traditional method is to give and onChange handler, but I am having troubles working out how to get the desired described above.

Parent

state = { aStateKey: "" };

someArray = ["test", "another test"];

updateField = (name, value) => {
        console.log("Updating field: " + name + " with value: " + value);
    
}

return(
    <div>
        <CreateDropdown name="aStateKey" items={this.someArray} onChange={this.updateField} />
    </div>
);

CreateDropdown

function CreateDropdown(props) {
    const handleClick = event => {
        console.log("changed name:" + event.name + "changed value: " + event.value);
        props.onChange(event.name, event.value);
    };

    return (
        <div>
            <select>
                {props.items.map(field => (
                    <option key={field} value={field} name={props.name} onClick={handleClick}>
                        {field}
                    </option>
                ))}
            </select>
        </div>
    );
}

Console log

Shows nothing! However, if I move the onClick from <option> to <select>, i.e.

return (
        <div>
            <select onChange={handleClick}>
                {props.items.map(field => (
                    <option key={field} value={field} name={props.name}>
                        {field}
                    </option>
                ))}
            </select>
        </div>
    );

The console shows:

Updating field: undefined with value: undefined.

changed name:undefinedchanged value: undefined

How can I achieve my desired behavior?