react-select cannot set id

selvi jp

i want to display name and store their id .but i can only pass name

dropdownhandleChange = (e) => {
this.setState({setSelectedValue:Array.isArray(e) ? e.map(x => x.value):null });
}
defaultValue={defaultValueArr}
placeholder={"Select Mates"}
onChange={this.dropdownhandleChange}
options={Dropdownlist.map(e => ({ label: e.Name, value: e.Id}))}
isMulti
/>
var defaultValueArr = [];
Details.map((Det)=>{
Det.profile_name.split(',').map((e)=>{
defaultValueArr.push({label:e,value:e});
});
});

21 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ganesan C5y ago
Accepted answer
Pls try below code.
getValues(apiValues) {
    let previousValue = [];
    let names = apiValues[0].profile_name.split(",");
    let ids = apiValues[0].user_id.split(",");
    let index = 0;

    if (names.length === ids.length) {
      names.forEach((item) => {
        let data = { value: ids[index].toString(), label: item };
        index++;
        previousValue.push(data);
      });
    }

    this.setState({ selectedOption: previousValue });
  }
Once fetch is success then call getValues function.
fetch(url, {
      method: 'GET', headers: { "Content-type": "application/json", "Accept": "application/json", },
    }).then(response => response.json())
      .then(data => {
        this.getValues(data);
      });
+1
selvi jp5y ago
Thank you so much its working
+1
selvi jp5y ago
yes right .issue is only passing userid. select label(profilename) to display and storing their id in value(user_id) in edit default value
+1
Ganesan C5y ago
So, you are assign entire below data to your state. right?
Your state "Details" has below value right?
[{
Group_Id:1,
Group_Name:"testing",
ImagePath:"",
profile_name: "Kanmani,Sri,John,Akila,Ravi,John",
user_id:"guid,guid,guid,guid"
}];

+1
selvi jp5y ago
This data is passing

+1
Ganesan C5y ago
Sorry. I am not able understand your data. I need value which your assigning some value to state "Details" right. I need that value.
fetch(url, {method: 'GET',headers: {"Content-type": "application/json","Accept": "application/json",},})
.then(response => response.json())
.then(data => {
console.log(data); // added log. check what values are coming. post that log values.
this.setState({Details: data});
});
execute above code and get the log value and post it.
+1
selvi jp5y ago
i am using formdata so i cant display whole data .i want store this id only

handleSubmit(event) {
event.preventDefault();

const data = new FormData(event.target);
console.log(data.get("user_id"));

let user = JSON.parse(localStorage.getItem('user'));

const accessToken=user;
fetch(url, {
method: 'POST',
headers:{

Accept: 'application/json',
Authorization: "Bearer " +accessToken

},
body: data,
});

}

+1
Ganesan C5y ago
I need response coming from your API. Then only find the solution. Just add console.log(data) before this.setState({}). Give me that value.
+1
selvi jp5y ago
check my last reply it is "details"
+1
Ganesan C5y ago
What is the value coming from response? Give me your sample response? What is the "data" value?
+1
selvi jp5y ago
fetch(url, {
method: 'GET',
headers: {
"Content-type": "application/json",
"Accept": "application/json",

},

}).then(response => response.json())
.then(data => {
this.setState({
Details: data
});
});

see i want to display this details in select value
var defaultValueArr = [];
Details.map((Det)=>{
defaultValueArr.push({ label:Det.profile_name , value:Det.user_id}); });
+1
Ganesan C5y ago
Create REST API for fecting the values from DB using any language (.NET ,.NET Core, Java). Call the API from React application using "fetch".
+1
selvi jp5y ago
No options and values are coming from db.i dont know how to fetch that.your giving const value for that but mine is coming from db
+1
Ganesan C5y ago
Is your issue resolved?
+1
Ganesan C5y ago
Hi,

Change "handleChange" function as below. It will allow to aremove existing values.
handleChange(value, actionDetails) {
    let items = [...this.state.selectedOption];
    if (actionDetails.action === "remove-value") {
      if (items) {
        var index = -1;
        items.forEach((item, i) => {
          if (item.label === actionDetails.removedValue.label && item.value === actionDetails.removedValue.value) {
            index = i;
            return;
          }
        });
        if (index > -1) {
          items.splice(index, 1);
        }
      }
    }
    else {
      items.push(actionDetails.option);
    }

    this.setState({ selectedOption: items });
  }
Add hideSelectedOptions={false} in select compoenent.
  placeholder={"Select Mates"}
  value={this.state.selectedOption}
  onChange={this.handleChange}
  options={options}
  isMulti={true}
  selectedValue={true}
  hideSelectedOptions={false}
/>
+1
selvi jp5y ago
Hi,
Thank you for this code its working but i cant cancel the selected value.if user want to modify already selected value?if i click close icon one more value will add
See i want to remove chocolate if i click x icon add one more chocolate
+1
Ganesan C5y ago
Hi,
As per my understanding, in the edit page you want to display the options as well as previous selected option (in add page). Is that your issue then you have to add previously selected value (in add page) to state in "componentDidMount()" life cycle. Then automatically previously selected value will bind with drop down. No need defaultValue.
Plase check the below code snippet,
import React from "react";
import Select from 'react-select';

export const options = [
  { value: '1', label: 'Chocolate' },
  { value: '2', label: 'Strawberry' },
  { value: '3', label: 'Vanilla' },
  { value: '4', label: 'Ice' },
];

const previousValue = [
  { value: '1', label: 'Chocolate' },
  { value: '2', label: 'Strawberry' },
];

export default class MultiSelectExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.Actions = this.Actions.bind(this);
  }

  componentDidMount() {
    this.setState({ selectedOption: previousValue });
  }

  Actions() {
    let selectedValue = [];
    let selectedLabel = [];
    this.state.selectedOption && this.state.selectedOption.forEach((item) => {
      selectedValue.push(item.value);
      selectedLabel.push(item.label);
    });

    console.log(selectedValue);
    console.log(selectedLabel);
  }

  handleChange(e) {
    let items = [...this.state.selectedOption];
    items.push(e[e.length - 1]);
    this.setState({ selectedOption: items });
  }

  render() {
    return (
      <>

          placeholder={"Select Mates"}
          value={this.state.selectedOption}
          onChange={this.handleChange}
          options={options}
          isMulti={true}
          selectedValue={true}
        />

         this.Actions()}>Get Value

    );
  }
}
+1
Ganesan C5y ago
I am not able to understand your issue. As per my understanding, in the edit page you want to display the options as well as previous selected option (in add page). Is that your issue or something else?
+1
Ganesan C5y ago
I hope above code snippet will help you and resolve your problem.
+1
Ganesan C5y ago
I have used the below values are options in Select component,

export const options = [
{ value: '1', label: 'Chocolate' },
{ value: '2', label: 'Strawberry' },
{ value: '3', label: 'Vanilla' },
{ value: '4', label: 'Ice' },
];
+1
Ganesan C5y ago
Hi,
Find the below code. Once you click the "Get Value" button. the selected id and lables are printed in console.
import React from "react";
import Select from 'react-select';

class MultiSelectExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.Actions = this.Actions.bind(this);
  }

  Actions() {
    let selectedValue = [];
    let selectedLabel = [];
    this.state.selectedOption && this.state.selectedOption.forEach((item) => {
      selectedValue.push(item.value);
      selectedLabel.push(item.label);
    });

    console.log(selectedValue);
    console.log(selectedLabel);
  }

  handleChange(e) {
    let items = [...this.state.selectedOption];
    items.push(e[e.length - 1]);
    this.setState({ selectedOption: items });
  }

  render() {
    return (
      <>

          placeholder={"Select Mates"}
          value={this.state.selectedOption}
          onChange={this.handleChange}
          options={options}
          isMulti={true}
        />

         this.Actions()}>Get Value

    );
  }
}
+1