How to get value of selected option in a dropdown using React JS?

Question

I'm trying to get the selected value of the dropdown using React Js.

It is giving the values but is giving the values randomly from the the options.

<select 
    name="category-select-1"
    class="form-select category-select" 
    id="category-select-1" 
    value={eventCategory} 
    onChange={handleEventCategory}>
    <option value={"default"}>Category</option>
    <option value={"meeting"}>Meeting</option>
    <option value={"workhours"}>Work Hours</option>
    <option value={"business"}>Business</option>
    <option value={"holiday"}>Holiday</option>
    <option value={"getTogether"}>Get-Together</option>
    <option value={"gifts"}>Gifts</option>
    <option value={"birthday"}>Birthday</option>
    <option value={"anniversary"}>Anniversary</option>
    <option value={"others"}>Others</option>
</select>

Here's how I'm trying to do it.

const [eventCategory, setEventCategory] = useState();

const handleEventCategory = (e)=>{
    setEventCategory(e.target.value);
    console.log(eventCategory);
}

What is wrong?

How do I get the value of a selected option in a dropdown using React JS?

you can check that by putting the log console.log(eventCategory); outside of the handler function .... as the state updates are more of like async i.e., with state update it re-renders which is the function body gets called with new values — KcH
– KcH, Commented Sep 20, 2022 at 7:07
Please ask 1 specific researched non-duplicate question. Please either ask re 1 bad query/function with obligatory minimal reproducible example, including why you think it should return something else or are unsure at the 1st subexpression that it doesn't give what you expect or are stuck, justified by reference to authoritative documentation, or ask about your overall goal giving working parts you can do with justification & a minimal reproducible example. Then misunderstood code doesn't belong. But please ask about unexpected behaviour 1st because misconceptions get in the way of your goal. How to Ask Help center Basic questions are faqs. — philipxy
– philipxy, Commented May 27, 2023 at 21:48

tomleb · Accepted Answer · 2022-09-20 07:06:51Z

2

Setting the state in React acts like an async function.
Meaning that the when you set the state and put a console.log right after it, it will likely run before the state has actually finished updating.

Which is why we have useEffect, a built-in React hook that activates a callback when one of it's dependencies have changed.

Example:

useEffect(() => {
   console.log(eventCategory)
   // Whatever else we want to do after the state has been updated.
}, [eventCategory])

This console.log will run only after the state has finished changing and a render has occurred.

Note: "eventCategory" in the example is interchangeable with whatever other state piece you're dealing with.

Check the documentation for more info about this.

answered Sep 20, 2022 at 7:06

tomleb

2,5232 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KcH Over a year ago

I don't think an useEffect is required here ...

tomleb Over a year ago

Yes, it's not really required here since he currently only logs the value to console, but if he were to need that value then he could indeed use the useEffect hook to allow for that. The main point I was trying to convey, however, is the "async-like" behavior of setState.

KcH Over a year ago

got it buddy, however my point was to convey the same without confusing with an extra info 😅

Raiyad Raad · Accepted Answer · 2022-09-20 07:40:47Z

1

Your code looks fine.

const handleEventCategory = (e)=>{
    setEventCategory(e.target.value);
    console.log(eventCategory);
}

console.log(eventCategory);

As setState is asynchronous, eventCategory value is printed before the state is changed. If you add console.log below the handleEventCategory you will get right output.

answered Sep 20, 2022 at 7:40

Raiyad Raad

5476 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to get value of selected option in a dropdown using React JS?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related