CODEWITHSUNDEEP
javascriptreactjs
buratino
buratino

Reputation: 1518

Handling events on dynamically created <select> dropdown options

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:

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?

Upvotes: 1

Views: 1689

Answers (2)

Nemer
Nemer

Reputation: 687

your target form this event is select and use onChange and here the updated function you need:

function CreateDropdown(props) {

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

Upvotes: 3

Sultan H.
Sultan H.

Reputation: 2938

UPDATE #1

Inside handleClick, you are using event.name and event.value to get the target values you want.

instead use event.target.name and event.target.value

Try using onChange instead of onClick in your select element.

It belongs to select not option elements.

Upvotes: 2

Related Questions