react-select not updating selected value on initial select

user_4611561 0
Viewed 4255

You can find the below example to see my issue: codesandox example

If I set the name property of the object, it works fine. But it is not working in other example in my application:

  setRegion(item.name);

Application example:

My usestate looks like this:

 const [department, setDepartment] = useState("");

Here is my application example:

                      <div className="sui-search-box">
                        <div className="department">
                            <label>
                              Department:
                              <Select id="depart" value={department} onChange={selectedValue => 
                                {
                                setDepartment(selectedValue.value);
                                setFilter("department", selectedValue.value, "any")
                              }}
                              options = {
                                results.map((depart, index) => {
                                  return {
                                    label: depart.name,
                                    value:depart.name,
                                    key:index
                                  }
                                })
                              }
                              />
                              {department}
                              </label> 
                          </div>
                     </div>

what is the right approach to set the state and why my current sandbox is not binding properly ?

react-select reactjs
2 Answers

value type must be the same as the first argument of onChange callback:

value={region}
onChange={(item) => {
  console.log(item);

  // set item instead of item.value
  setRegion(item);
}}

Full code:

<Select
  value={region}
  onChange={(item) => {
    console.log(item);

    setRegion(item);
  }}
  options={guests.map((guest, index) => {
    return {
      label: guest.name,
      value: guest.name,
      key: index
    };
  })}
/>
{region.value}

Codesandbox Demo

user_94494260 
import ReactDOM from "react-dom";

import "./styles.css";
import "./Department";
import React, { useState } from "react";
import Select from "react-select";

function App() {
  const guests = [
    {
      name: "Kait",
      plus: true,
      plusName: "Kitty"
    },
    {
      name: "Séanin",
      plus: true,
      plusName: "Guest"
    }
  ];

  const [region, setRegion] = useState("");

  return (
    <>
      <Select
        value={region}
        onChange={(item) => {
          console.log(item);

          setRegion(item.value.plusName);
        }}
        options={guests.map((guest, index) => {
          return {
            label: guest.name,
            value: guest,
            key: index
          };
        })}
      />
      {region}
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The problem was what ever you set as option you will get the same in the item.

So instead of just storing the name I stored the full guest object in option.value and accordingly read it from item.value.<feild>.

user_157487240
Related