onChange function is not called in select dropdown-CodePudding

im trying o set a onChange Function when there is a change on the dropdown. onChange it should be forwarded to another Side (using Navbar in React)

import React from 'react';
import Select from 'react-select'
import { Link } from "react-router-dom";
import '../index.css'; 
import { Navbar } from "../components";
import { BodyMain } from '../components';

function handleChange() {
  <Link to="/check1"> </Link>
}

const options = [
  { value: 'Claire', label: 'Claire', },
  { value: 'Coco', label: 'Coco' },
  { value: 'Emma', label: 'Emma' },
  { value: 'Leni', label: 'Leni' },


const hotel = () => {
  return(

<Select onChange={handleChange} options={options} /> 
 
     )
}

export default hotel;

How can i bring that handleChange to life?

Thank you

As seen i tried to set the onChange right after the select, also on different positions such as in the const [option]

Ive seen other documentations where they had a smaller im using the bigger one with it does make a colour change but i dont know where to go from here

CodePudding user response：

Hm, are you trying to navigate somewhere in case of change of the dropdown? All you're doing here is creating a link element when someone changes the select. You should use redirect feature of React router. So when someone changes the select, it redirects them to another site.

CodePudding user response：

If you want to navigate to another route when you make a change, you'll have to use useNavigate from react-router-dom.

import {useNavigate} from 'react-router-dom'.

const navigate = useNavigate()

function handleChange = () => {
   navigate("/check1")
}