I have dropdown from which a user will select a value from, each of these values have a corresponding description. To populate the dropdown i retrieve the values from my database
Once a user has selected their value, I would like to update another field (so a separate state) with that corresponding description
This is how i populate the dropdown so far
const [newEventName, setEventName] = useState('');
const [newEventDescription, setEventDescription] = useState('');
<Select
onValueChange={newEventName => setEventName(newEventName)}
placeholder="Select Event"
>
{eventTypeData.map(event => (
<Select.Item
key={event.id}
label={event.name}
value={event.name}
/>
))}
</Select>
Can I call two methods within my onValueChange, so i would create a custom function to handle mapping the value selected to its appropriate description, then call it within the onValueChange
Unless theres a better way?
You can just do like bellow
const updateValues = (newEventName) => {
// find your newEventDescription
setEventName(newEventName);
setEventDescription(newEventDescription);
}
onValueChange={newEventName => updateValues(newEventName)}
This is pretty straightforward, create a function and write the logic to extract description from your eventName, and then set both values.
const setEventNameAndDesc = (newEventName) => {
// extract your description from the eventName
setEventName(newEventName);
setEventDescription(newEventDescription);
}
onValueChange={newEventName => setEventNameAndDesc(newEventName)}