CODEWITHSUNDEEP
javascripthtmlreactjs
ServletException
ServletException

Reputation: 239

Using react-select with multiple inputs

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

Upvotes: 0

Views: 1630

Answers (1)

lakimapturn
lakimapturn

Reputation: 92

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!

Upvotes: 1

Related Questions