need to set default value like you can see In the image and if a user want to remove default value or select only one he is able to do it right now it's not set to default user need to select that list object one by one but I need to set all value by default it objects list you can see list type is store in object how can I set this all object to by default in the dropdown list after setting by default I set it like this value={listType} but when I try to change it or remove it not changing
const changeList = (e) => {
console.log("List s is.....", ListS);
console.log("e here is", e);
if (e.selected.find(({ value }) => value === "Sanctions")) {
setListS((prev_state) => ({
...prev_state,
Sanctions: true,
}));
} else {
setListS((prev_state) => ({
...prev_state,
Sanctions: false,
}));
setSearchType({ value: "individual", label: "individual" });
}
if (e.selected.find(({ value }) => value === "AMS")) {
setListS((prev_state) => ({
...prev_state,
NNS: true,
}));
} else {
setListS((prev_state) => ({
...prev_state,
NNS: false,
}));
}
if (e.selected.find(({ value }) => value === "PEP")) {
setListS((prev_state) => ({
...prev_state,
PEP: true,
}));
} else {
setListS((prev_state) => ({
...prev_state,
PEP: false,
}));
}
};
const [ListS, setListS] = useState({
Sanctions: false,
NNS: false,
PEP: false,
});
const listType = [
{ value: "Sanctions", label: "Sanctions" },
{ value: "NNS", label: "AMS" },
{ value: "PEP", label: "PEP" },
];
<Select
options={listType}
name="sanctionList"
placeholder="Select"
isMulti
styles={{
multiValueLabel: (base) => ({
...base,
backgroundColor: "#0bb7a7",
color: "white",
fontSize: "0.8vw",
borderRadius: 5,
}),
control: (data) => ({
...data,
fontFamily: "Montserrat",
fontSize: "0.8vw",
borderColor: "#adadad",
}),
menu: (data) => ({
...data,
fontFamily: "Montserrat",
fontSize: "0.8vw",
}),
}}
// isDisabled={!ListSel}
value={ListS}
onChange={(e) => changeList({ selected: e })}
theme={(theme) => ({
...theme,
colors: {
...theme.colors,
text: "black",
primary25: "#d6fdf7",
primary: "#0bb7a7",
primary50: "#d6fdf7",
},
})}
></Select>
label
and value
attributes, you need to use getOptionLabel
of react-select component to identify the label.AMS
, you need to control NNS
instead of AMS
in your second if/else of your changeList
function.The following code can be a valid example of setting default values on multi selectable Select
component.
import React, { Component, useState } from 'react';
import Select from 'react-select';
const MySelectComponent = () => {
const [ListS, setListS] = useState({
Sanctions: true,
NNS: true,
PEP: false,
});
const listType = [
{ value: "Sanctions", label: "Sanctions" },
{ value: "NNS", label: "AMS" },
{ value: "PEP", label: "PEP" },
];
const changeList = (e) => {
console.log("List s is.....", ListS);
console.log("e here is", e);
if (e.selected.find(({ value }) => value === "Sanctions")) {
setListS((prev_state) => ({
...prev_state,
Sanctions: true,
}));
} else {
setListS((prev_state) => ({
...prev_state,
Sanctions: false,
}));
//setSearchType({ value: "individual", label: "individual" });
}
if (e.selected.find(({ value }) => value === "NNS")) {
setListS((prev_state) => ({
...prev_state,
NNS: true,
}));
} else {
setListS((prev_state) => ({
...prev_state,
NNS: false,
}));
}
if (e.selected.find(({ value }) => value === "PEP")) {
setListS((prev_state) => ({
...prev_state,
PEP: true,
}));
} else {
setListS((prev_state) => ({
...prev_state,
PEP: false,
}));
}
};
const selectedValueKeysFiltered = Object.keys(ListS).filter((sv) => {
return ListS[sv];
});
const selectedValue = selectedValueKeysFiltered.map((svk) => {
return listType.find(lt => lt.value === svk);
});
return <Select
getOptionLabel={option => {return `${option.label}`}}
options={listType}
name="sanctionList"
placeholder="Select"
isMulti
styles={{
multiValueLabel: (base) => ({
...base,
backgroundColor: "#0bb7a7",
color: "white",
fontSize: "0.8vw",
borderRadius: 5,
}),
control: (data) => ({
...data,
fontFamily: "Montserrat",
fontSize: "0.8vw",
borderColor: "#adadad",
}),
menu: (data) => ({
...data,
fontFamily: "Montserrat",
fontSize: "0.8vw",
}),
}}
// isDisabled={!ListSel}
value={selectedValue}
onChange={(e) => changeList({ selected: e })}
theme={(theme) => ({
...theme,
colors: {
...theme.colors,
text: "black",
primary25: "#d6fdf7",
primary: "#0bb7a7",
primary50: "#d6fdf7",
},
})}
></Select>;
};
export default MySelectComponent;
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras