cannot proceed to the desired path in select/option menu

April 25, 2022

I have a select menu in my code. It has two options. By clicking on each option, I want to proceed to another page on the same site. Here is my code:

import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const navigate = useNavigate()

<div className="flex justify-center">
                    <select className="form-select form-select-sm aria-label=".form-select-sm example">
                    <option value="1" onChange={() => navigate('/')}>one</option>
                    <option value="2" onChange={() => navigate('/ext')}>two</option>
                    </select>
                </div>

but when I select each option, it doesn’t proceed to desired path. What’s wrong?

>Solution :

Try using onClick event instead of onChange, onChange should be used on a select element and not on an option element. So either wrap the options in a select and use onChange or try using the onClick on the options.