Styjun

I have an object called TaskTypes, inside of the object it looks like this

-LJLQR7lVkbzsxAZC3JI: code: "Pest & Disease", colour: "0xf2473f", deleted: null, subTypes: …
-LJLQR7mZaeBNnEhdHtU: code: "Health & Safety", colour: "0x8c5de4", deleted: null, subTypes: …
-LJLQR7mZaeBNnEhdHtZ: code: "Structure", colour: "0x6b8e23", deleted: null, subTypes: …
-LJLQR7mZaeBNnEhdHtl: code: "Repairs & Maintenance", colour: "0x66a9fb", deleted: null, subTypes: …
-LJLQR7nJdpun5Tugh39: code: "Reminders", colour: "0xf2bb61", deleted: null, subTypes: null
-LUDgbjHzQpktk34u8-4: code: "Sample", colour: "0x2196f3", deleted: null, subTypes: …
-L_dAY_Aju0IBGwY9VVA: code: "test", colour: "0x03a9f4", deleted: null, subTypes: null

The first random strings is the Object Id.

I want the state of taskId to update each time I select one of those Objects, eg If I select "Pests & Disease" from the dropdown, the taskId will be "-LJLQR7lVkbzsxAZC3JI"

I have created a function to achieve this, however the state is not being updated.

this.state = id: "", taskId: null,
 taskSubId: null,
 taskSubSubId: null 

setTaskType = (id: string) => 
 console.log("ID:", id)
 console.log("id.length:", id.length)
 console.log("stateTaskId", (this.state as any).taskId)
 if (id.length > 0) 
 console.log("setTaskTypeFunction", this.props.metadata.TaskTypes)
 this.setState( id: id, taskId: id, taskSubId: null, taskSubSubId: null, taskType: Object.assign(, this.props.metadata.TaskTypes[id]) )
 
 

Heres my JSX

<select className="input-field-slider dropdown w-select" onClick=() => this.setTaskType("")>
 <option key=taskId value=taskId>Select A Category</option>
 
 Object.keys(taskTypes)
 .sort((a, b) => taskTypes[a].code.toLowerCase() > 
 taskTypes[b].code.toLowerCase() ? 1 : -1) 
 .map(taskId =>
<option onClick=() => this.setTaskType(taskId) value=taskId key=taskId>taskTypes[taskId].code</option>)
</select>

As of now, I'm displaying the entire object in my dropdown ( pests & diseases etc) but my state is not being updated

A few modifications might help.

Select change handler

setTaskType = (event) => 
 const id = event.target.value;
 // continue with the rest of code

JSX select element

<select className="input-field-slider dropdown w-select" value=this.state.taskId onChange=this.setTaskType>
 <option value=''>Select A Category</option>
 Object.keys(taskTypes)
 .sort((a, b) => taskTypes[a].code.toLowerCase() > 
 taskTypes[b].code.toLowerCase() ? 1 : -1) 
 .map(taskId => 
 <option value=taskId key=taskId>taskTypes[taskId].code</option>
 )
</select>

Read more details at React Docs: select tag