Clue Mediator

How to get selected by only value in react-select

๐Ÿ“…February 17, 2020
๐Ÿ—ReactJS

Today we will show you how to get selected by only value in react-select dropdown. Most of the developers get confused about the display selected value in react-select by passing only value. So today we will share the solution with you.

How to set & get only value string in react-select's state, react js dropdown selected value, react select onchange get selected value, react-select set selected option, how to set default value in react select, how to set value selected in dropdown, react select get selected value, Issue: react select not showing selected value, how to get select option value in react, react-select get value on change.

Checkout more articles on ReactJS

  • Set environment variables in ReactJS
  • image-content-in-reactjs" title="Validate Image Content in ReactJS">Validate Image Content in ReactJS
  • autocomplete-in-reactjs" title="Google Place Autocomplete in ReactJS">Google Place Autocomplete in ReactJS
  • scroll-to-the-top-of-the-page-after-render-in-reactjs" title="Scroll to the top of the page after render in ReactJS">Scroll to the top of the page after render in ReactJS

While you are working with react-select dropdown package then you need to get selected dropdown by passing the value only. But by default react-select needs the whole object to get selected. So in this article we will show you that react-select gets selected by only value.

If you are looking for similar functionality in Multi Select dropdown then you should check out the article below.

How to get selected by only value for multi select in react-select

https://youtu.be/mhLVjY09FOc

Steps to get selected by value in react-select

  1. Implement react-select dropdown
  2. Update logic in value selection
  3. Output

1. Implement react-select dropdown

First, Try to implement react-select dropdown in ReactJS project. If you don't know how to do it then refer to the link below.

Implement dropdown in ReactJS

2. Update logic in value selection

Now, it's time to change the minor logic for the value attribute and it will work for you. Check the code below for it.

<Select
  value={data.filter(obj => obj.value === selectedValue)} // set selected value
  ...
  ...
/>

After updating the logic, your code should look like below.

App.js

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

function App() {
  const data = [
    {
      value: 1,
      label: "cerulean"
    },
    {
      value: 2,
      label: "fuchsia rose"
    },
    {
      value: 3,
      label: "true red"
    },
    {
      value: 4,
      label: "aqua sky"
    },
    {
      value: 5,
      label: "tigerlily"
    },
    {
      value: 6,
      label: "blue turquoise"
    }
  ];

  // set value for default selection
  const [selectedValue, setSelectedValue] = useState(3);

  // handle onChange event of the dropdown
  const handleChange = e => {
    setSelectedValue(e.value);
  }

  return (
    <div className="App">
      <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />

      <Select
        placeholder="Select Option"
        value={data.find(obj => obj.value === selectedValue)} // set selected value
        options={data} // set list of the data
        onChange={handleChange} // assign onChange function
      />

      {selectedValue && <div style={{ marginTop: 20, lineHeight: '25px' }}>
        <div><b>Selected Value: </b> {selectedValue}</div>
      </div>}
    </div>
  );
}

export default App;

3. Output

Output - How to get selected by value in react-select - Clue Mediator

Output - How to get selected by value in react-select - Clue Mediator

That's it for today.
Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project