how to link to a page with picked item from dropdown

user_13224113 0
Viewed 271

I'm using react-select for my web application I have a dropdown with autofill, when I click on input I will see a list of all the car items that come from API but I need to enter the needed one and redirect to that details page. Should I create route for this ?

Take a look: enter image description here

When I click on BMW I need to go to bmw detials page. if it was just simple car item I would create a button under and Link

<Link  className='btn-item auction-btn mr-2' to={`/carDetails/${item.id}`}>Details</Link>.

with routing:

 <Route
            exact
            path="/carDetails/:id"
            render={({ match }) => (
              <CarDetails item={data.find((item) => String(item.id) === String(match.params.id))} />
            )}
          />

but this is react-select library and it's component that I have to filter and than to go to that page I need ..

react-select react-native react-hooks reactjs javascript
1 Answers

You can do history.push in change handler of react-select. An example:

export default function MyComponent() {
  const [value, setValue] = useState()
  const history = useHistory()

  function handleChange(newValue) {
    setValue(newValue)
    history.push(`/carDetails/${newValue.id}`)
  }

  return (
    <Select
      value={value}
      options={options}
      onChange={handleChange}
    />
  )
}
user_28735380
Related