Get the value of <select> dropdown in ReactJs

Question

I am pretty new to web development, I want to be able to retrieve the value in the select that is selected in the below code, but I am unable to.

I want to get it in a variable in order to send it using api. I am able to open the dropdown meni and able to

import {useHistory} from 'react-router-dom'
import { useForm, FormActions } from '../../context/FormContext'
import { Theme } from '../../components/Theme/intex'
import { ChangeEvent, useEffect } from 'react'


export const FormStep1 = () => {


    const history = useHistory()
    const { state, dispatch} = useForm()

    const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
        dispatch({
            type: FormActions.setName,
            payload: e.target.value
        })
    }

    const handleNextStep = () =>{
        if(state.name !== '') {
            history.push('/step2')
        } else{
            alert('Please enter your details')
        }
        state.team = 'test'

    }

    useEffect(()=>{
        dispatch({
            type: FormActions.setCurrentStep,
            payload: 1
        })

    },[])

    
    return(
        <Theme>
            <C.Container>
                <p className='Step'>Step 1/3</p>
                <h2>Team Name</h2>
                <p>Select Existing Team or Create a New Team</p>

                <label> Select your team_usecase </label>
                <select name="pets" id="pet-select">
                    <option value=""> Select your team </option>
                    <option value="dog">dog</option>
                    <option value="cat">cat</option>
                    <option value="hamster">hamster</option>
                    <option value="parrot">parrot</option>
                    <option value="spider">spider</option>
                    <option value="goldfish">Goldfish</option>
                </select>
    )
}```


I was able to find a few solutions but I couldn't get them to work, so any help would be appreciated.

Does this answer your question? How to get selected value of a dropdown menu in ReactJS — bobkorinek
– bobkorinek, Commented Sep 20, 2022 at 10:38

Vikas Singh · Accepted Answer · 2022-09-20 10:42:54Z

0

You can achieve this by putting onChange handler on select like this:

return(
        <Theme>
            <C.Container>
                <p className='Step'>Step 1/3</p>
                <h2>Team Name</h2>
                <p>Select Existing Team or Create a New Team</p>

                <label> Select your team_usecase </label>
                <select name="pets" id="pet-select" onChange=(e => handleNameChange(e))>
                    <option value=""> Select your team </option>
                    <option value="dog">dog</option>
                    <option value="cat">cat</option>
                    <option value="hamster">hamster</option>
                    <option value="parrot">parrot</option>
                    <option value="spider">spider</option>
                    <option value="goldfish">Goldfish</option>
                </select>
            </C.Container>
        </Theme>
)

edited Sep 20, 2022 at 10:42

Vikas Singh

1,8651 gold badge18 silver badges27 bronze badges

answered Sep 20, 2022 at 10:39

Syed Uzair Bukhari

4172 silver badges9 bronze badges

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

2 Comments

krak Over a year ago

It is saying Type 'boolean' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.

Syed Uzair Bukhari Over a year ago

Hopefully this will fix this onChange={(e: React.ChangeEvent<HTMLInputElement>): void => handleNameChange(e)}

Collectives™ on Stack Overflow

Get the value of <select> dropdown in ReactJs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related