react-select cannot set id

Question

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 });
}
<Select
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});
});
});

Ganesan C · 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); });

Ganesan C · Answer

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 ); } }

Ganesan C · Answer

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 ); } }

selvi jp · Answer

Thank you so much its working

selvi jp · Answer

yes right .issue is only passing userid. select label(profilename) to display and storing their id in value(user_id) in edit default value

Ganesan C · Answer

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" }];

selvi jp · Answer

This data is passing

Ganesan C · Answer

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.

selvi jp · Answer

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, }); }

Ganesan C · Answer

I need response coming from your API. Then only find the solution. Just add console.log(data) before this.setState({}). Give me that value.

selvi jp · Answer

check my last reply it is "details"

Ganesan C · Answer

What is the value coming from response? Give me your sample response? What is the "data" value?

selvi jp · Answer

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}); });

Ganesan C · Answer

Create REST API for fecting the values from DB using any language (.NET ,.NET Core, Java). Call the API from React application using "fetch".

selvi jp · Answer

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

Ganesan C · Answer

Is your issue resolved?

Ganesan C · Answer

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 } />

selvi jp · Answer

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

Ganesan C · Answer

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?

Ganesan C · Answer

I hope above code snippet will help you and resolve your problem.

Ganesan C · Answer

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' }, ];

react-select cannot set id

Answers (21)