Creating a handler for fluent ui drop down, using a dynamic name for a React state

Question

I have a drop down:

  <Dropdown
    id="JobPlanDD"
    selectedKey={(this.state["JobPlanDD-option"]) ? (this.state["JobPlanDD-option"]).key : undefined}
    placeholder="Select..."
    onChange={(e, i) => this.handleChange(e, i)} 
    options={jobPlanDDOptions}                                 
    />

And I have a handler for that drop down and any others I make in the future:

 const id = evt.target.querySelector('span').id;
  const theItem = item.text;

  this.setState({ 
    [id]: theItem 

  });

For this particular drop down I've been told to use JobPlanDD-option in the selectedKey property but I don't understand why.

I manage to log the id of the of the particular drop down thanks to the handler const id = evt.target.querySelector('span').id;

but it returns JobPlanDD-option which can't be a state because it has a hyphen or minus.

Can someone explain to me what's going on here?

I have read this and although it describes much, it doesn't completely pertain to my question: Reactjs setState() with a dynamic key name?

"but it returns JobPlanDD-option which can't be a state because it has a hyphen or minus." Sure it can, after all, state is just an object, and the keys can be strings of any kind. — lanxion, May 18 '21 at 08:17
console.log(this.state["JobPlanDD-option"], 'state.JobPlanDD') Yes! Your nudge worked. Should have guessed! I'll update with an answer @lanxion — NightTom, May 18 '21 at 08:24

score 0 · Accepted Answer · answered May 18 '21 at 08:28

0

Needed a nudge with this one: The dynamic state was being set, it was just how I needed to write it in order to use it:

console.log(this.state["JobPlanDD-option"], 'state.JobPlanDD')

Staring me in the face...

answered May 18 '21 at 08:28

NightTom

418
15
37

Creating a handler for fluent ui drop down, using a dynamic name for a React state

1 Answers1