React Jsx: Selecting "Selected" on Selected <Select> Option

React JSX: selecting selected on selected select option

React makes this even easier for you. Instead of defining selected on each option, you can (and should) simply write value={optionsState} on the select tag itself:

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

For more info, see the React select tag doc.

Also, React automatically understands booleans for this purpose, so you can simply write (note: not recommended)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

and it will output 'selected' appropriately.

Add the selected option from one select to another select in ReactJs

https://codesandbox.io/s/nice-cartwright-6zulx?file=/src/index.js:0-69

import { useState } from "react";
import "./styles.css";

const baseOptions = [
  {
    label: "option 1",
    value: "1"
  },
  {
    label: "option 2",
    value: "2"
  },
  {
    label: "option 3",
    value: "3"
  }
];

const Select = ({ options, onChange, value, disabledOptions = [] }) => (
  <select onChange={onChange} value={value}>
    <option disabled value="">
      select an option
    </option>
    {options.map((option, i) => (
      <option
        key={option.value}
        value={option.value}
        disabled={
          disabledOptions.findIndex((o) => o.value === option.value) !== -1
        }
      >
        {option.label}
      </option>
    ))}
  </select>
);

export default function App() {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const [firstSelectValue, setFirstSelectValue] = useState("");
  const [secondSelectValue, setSecondSelectValue] = useState("");

  const handleFirstSelectChange = (e) => {
    const value = e.target.value;
    const option = baseOptions.find((o) => o.value === value);
    setSelectedOptions([...selectedOptions, option]);
    setFirstSelectValue(option.value);
  };

  const handleSecondSelectChange = (e) => {
    setSecondSelectValue(e.target.value);
  };
  return (
    <div className="App">
      <Select
        options={baseOptions}
        onChange={handleFirstSelectChange}
        value={firstSelectValue}
        disabledOptions={selectedOptions}
      />

      <Select
        options={selectedOptions}
        onChange={handleSecondSelectChange}
        value={secondSelectValue}
      />

      <div>Selected Value: {secondSelectValue}</div>
    </div>
  );
}

Getting the newly selected option value with React Select

To get the current value, you should be using the value from the onChange instead. You don't need ref for this

<Select
  options={[
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
  ]}
  name="mySelect"
  ref={mySelect}
  instanceId="mySelect"
  defaultValue=""
  onChange={(value) => getSelect(value)}
/>

function getSelect(val) {
    console.log(val)
}

React-Select: How do I update the selected option dropdown's defaultValue on selected value onChange?

Looks like I had to directly modify my prop's inner property, namely risk.ownerid, and risk.approverid, to the option value so that my select option's filter would choose the appropriate value since the select option was dependent on the object's data.users list of users.

Reliance on the props of the risk which is controlling the filter predicate for the users list effectively solved my issue. Now navigation to other risks fetches the appropriate users and changing the user manually updates the select option until navigation away and back occurs, thereby re fetching the original user for the dropdown.

value={this.props.data.users.filter(option => option.value === this.props.data.risk.ownerid)}

value={this.props.data.users.filter(option => option.value === this.props.data.risk.approverid)}

handleOwnerChange = (option) => {
    this.setState({selectedOwnerId: option.value});
    this.props.data.risk.ownerid = option.value;
}
handleApproverChange = (option) => {
    this.setState({selectedApproverId: option.value});
    this.props.data.risk.approverid = option.value;
}

Cannot get the selected value in React-select

You should be using find instead of filter

 value={options.find(function (option) {
          return option.value === selectedOption;
 })}

The find method returns the first value that matches from the collection. Once it matches the value in findings, it will not check the remaining values in the array collection. The filter method returns the matched values in an array from the collection.

In case of value option is computed as undefined then defaultValue will be picked by react-select. For that try setting the state as "".

const [selectedOption, setSelectedOption] = useState("");

Full code from your sandbox:

import React, { useState } from "react";
import Select from "react-select";

export default function App() {
  const [selectedOption, setSelectedOption] = useState("");
  const options = [
    { value: "0", label: "0" },
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
    { value: "7", label: "7" },
    { value: "8", label: "8" },
    { value: "9", label: "9" },
    { value: "10", label: "10" },
    { value: "11", label: "11" },
    { value: "12", label: "12" }
  ];
  const handleTypeSelect = (e) => {
    setSelectedOption(e.value);
  };

  return (
    <div>
      <Select
        options={options}
        onChange={handleTypeSelect}
        value={options.find(function (option) {
          return option.value === selectedOption;
        })}
        defaultValue={{ label: "8", value: "8" }}
        label="Single select"
      />
    </div>
  );
}

---

Related Topics