Using react-select with multiple inputs

Question

I have multiple react-select inputs, each have their own separate options array. The issue i'm having is I'm now sure how to properly store the output of each select input.

I want to use this select output to POST to my backend but i'm unsure how to do it all with a single handler function.

This is what I have so far, i have 2 paragraphs to just output the appropriate result from the select fields but i can't seem to get it working.

This is the codesandbox i have:

https://codesandbox.io/s/busy-yonath-rlj9e?file=/src/App.js

Answer 1

In your code you are using the useState() hook and everytime a user selects an option, you are setting your state variable to the selected value. The problem is that everytime you run the setSelectOptions({ e }) function, you are overwriting the existing data with the value of 'e'.

What you can do is: Create a selectHandler function that takes in 2 arguments (the new value and the value it corresponds to in the state variable)

The code will look something like this:

 import "./styles.css"; import Select from "react-select"; import { useEffect, useState } from "react"; export default function App() { const [selectOptions, setSelectOptions] = useState({ brand: "", model: "", color: "", bodyType: "", fuelType: "", transmission: "", location: "" }); const brandOptions = [ { value: "bmw", label: "Bmw" }, { value: "audi", label: "Audi" }, { value: "toyota", label: "Toyota" }, { value: "nissan", label: "Nissan" } ]; const transmissionOptions = [ { value: "automatic", label: "Automatic" }, { value: "manual", label: "Manual" } ]; useEffect(() => console.log(selectOptions), [selectOptions]) const handleChange = (e, type) => { setSelectOptions((previousState) => ({...previousState, [type]: e.value, })); }; return ( <div className="App"> selected brand: {selectOptions.brand} <br /> selected transmission:{selectOptions.transmission} <div className="mb-2" style={{ width: "40%", margin: "0 auto" }}> <Select value={selectOptions.brand} onChange={(e) => handleChange(e, "brand")} placeholder="Select brand" options={brandOptions} /> <Select value={selectOptions.transmission} onChange={(e) => handleChange(e, "transmission")} placeholder="Select transmission" options={transmissionOptions} /> </div> </div> ); }

Just as an explanation, all I am doing in the setSelectOptions() function is passing in the previous values of the state variable and updating the value coinciding to the select field.

Note: Insert this code into your project, I ran it and it worked so let me know if it did help!