Handling .map and if/else statement for react render - using React-select
I am using react-select and the creatable function that allows you to create a new select option - just type in the select/input field on example. When you type in the first custom option it defaults into a group called "new Group". When you create a 2nd custom option this should overwrite the first in the new group. However the group name disappears.
This is the incorrect code that results in that behavior...
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
Here is the example created - https://codesandbox.io/s/w761j8v855
javascript reactjs react-redux react-select
asked Nov 12 at 11:38
Tom Rudge
1,56332752
add a comment |
I am using react-select and the creatable function that allows you to create a new select option - just type in the select/input field on example. When you type in the first custom option it defaults into a group called "new Group". When you create a 2nd custom option this should overwrite the first in the new group. However the group name disappears.
This is the incorrect code that results in that behavior...
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
Here is the example created - https://codesandbox.io/s/w761j8v855
javascript reactjs react-redux react-select
asked Nov 12 at 11:38
Tom Rudge
1,56332752
add a comment |
I am using react-select and the creatable function that allows you to create a new select option - just type in the select/input field on example. When you type in the first custom option it defaults into a group called "new Group". When you create a 2nd custom option this should overwrite the first in the new group. However the group name disappears.
This is the incorrect code that results in that behavior...
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
Here is the example created - https://codesandbox.io/s/w761j8v855
javascript reactjs react-redux react-select
asked Nov 12 at 11:38
Tom Rudge
1,56332752
I am using react-select and the creatable function that allows you to create a new select option - just type in the select/input field on example. When you type in the first custom option it defaults into a group called "new Group". When you create a 2nd custom option this should overwrite the first in the new group. However the group name disappears.
This is the incorrect code that results in that behavior...
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
Here is the example created - https://codesandbox.io/s/w761j8v855
javascript reactjs react-redux react-select
javascript reactjs react-redux react-select
asked Nov 12 at 11:38
Tom Rudge
1,56332752
asked Nov 12 at 11:38
Tom Rudge
1,56332752
asked Nov 12 at 11:38
Tom Rudge
1,56332752
asked Nov 12 at 11:38
Tom Rudge
1,56332752
asked Nov 12 at 11:38
Tom Rudge
1,56332752
1,56332752
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
As in your case you know that your custom option group is at the very end of your options array, I would even right less code and improve the speed / performance of it with the following code:
state = {
value: this.props.options[0].options,
options: this.props.options,
hasCreatedOption: this.props.options.length - 1
};
handleCreate = input => (inputValue: any) => {
this.setState({ isLoading: true });
setTimeout(() => {
const { options } = this.state;
const newOption = createOption(inputValue);
options[this.state.hasCreatedOption].options[0] = newOption;
this.setState({
isLoading: false,
options: [...options],
value: newOption,
formatGroupLabel: "new label"
});
input.onChange(newOption);
}, 1000);
};
As you declare your custom option group you basically know the index of it and can directly update the right array without looping through all of the different group you may have. Here the example.
answered Nov 12 at 15:38
Laura
1,084619
add a comment |
I came up with this answer:
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption].options[0] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
The false outcome was overwriting the top level property and recreating it without its label. Not sure if there is a better way here.
answered Nov 12 at 13:53
Tom Rudge
1,56332752
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53261367%2fhandling-map-and-if-else-statement-for-react-render-using-react-select%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
As in your case you know that your custom option group is at the very end of your options array, I would even right less code and improve the speed / performance of it with the following code:
state = {
value: this.props.options[0].options,
options: this.props.options,
hasCreatedOption: this.props.options.length - 1
};
handleCreate = input => (inputValue: any) => {
this.setState({ isLoading: true });
setTimeout(() => {
const { options } = this.state;
const newOption = createOption(inputValue);
options[this.state.hasCreatedOption].options[0] = newOption;
this.setState({
isLoading: false,
options: [...options],
value: newOption,
formatGroupLabel: "new label"
});
input.onChange(newOption);
}, 1000);
};
As you declare your custom option group you basically know the index of it and can directly update the right array without looping through all of the different group you may have. Here the example.
answered Nov 12 at 15:38
Laura
1,084619
add a comment |
As in your case you know that your custom option group is at the very end of your options array, I would even right less code and improve the speed / performance of it with the following code:
state = {
value: this.props.options[0].options,
options: this.props.options,
hasCreatedOption: this.props.options.length - 1
};
handleCreate = input => (inputValue: any) => {
this.setState({ isLoading: true });
setTimeout(() => {
const { options } = this.state;
const newOption = createOption(inputValue);
options[this.state.hasCreatedOption].options[0] = newOption;
this.setState({
isLoading: false,
options: [...options],
value: newOption,
formatGroupLabel: "new label"
});
input.onChange(newOption);
}, 1000);
};
As you declare your custom option group you basically know the index of it and can directly update the right array without looping through all of the different group you may have. Here the example.
answered Nov 12 at 15:38
Laura
1,084619
add a comment |
As in your case you know that your custom option group is at the very end of your options array, I would even right less code and improve the speed / performance of it with the following code:
state = {
value: this.props.options[0].options,
options: this.props.options,
hasCreatedOption: this.props.options.length - 1
};
handleCreate = input => (inputValue: any) => {
this.setState({ isLoading: true });
setTimeout(() => {
const { options } = this.state;
const newOption = createOption(inputValue);
options[this.state.hasCreatedOption].options[0] = newOption;
this.setState({
isLoading: false,
options: [...options],
value: newOption,
formatGroupLabel: "new label"
});
input.onChange(newOption);
}, 1000);
};
As you declare your custom option group you basically know the index of it and can directly update the right array without looping through all of the different group you may have. Here the example.
answered Nov 12 at 15:38
Laura
1,084619
As in your case you know that your custom option group is at the very end of your options array, I would even right less code and improve the speed / performance of it with the following code:
state = {
value: this.props.options[0].options,
options: this.props.options,
hasCreatedOption: this.props.options.length - 1
};
handleCreate = input => (inputValue: any) => {
this.setState({ isLoading: true });
setTimeout(() => {
const { options } = this.state;
const newOption = createOption(inputValue);
options[this.state.hasCreatedOption].options[0] = newOption;
this.setState({
isLoading: false,
options: [...options],
value: newOption,
formatGroupLabel: "new label"
});
input.onChange(newOption);
}, 1000);
};
As you declare your custom option group you basically know the index of it and can directly update the right array without looping through all of the different group you may have. Here the example.
answered Nov 12 at 15:38
Laura
1,084619
answered Nov 12 at 15:38
Laura
1,084619
answered Nov 12 at 15:38
Laura
1,084619
answered Nov 12 at 15:38
Laura
1,084619
1,084619
add a comment |
add a comment |
I came up with this answer:
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption].options[0] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
The false outcome was overwriting the top level property and recreating it without its label. Not sure if there is a better way here.
answered Nov 12 at 13:53
Tom Rudge
1,56332752
add a comment |
I came up with this answer:
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption].options[0] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
The false outcome was overwriting the top level property and recreating it without its label. Not sure if there is a better way here.
answered Nov 12 at 13:53
Tom Rudge
1,56332752
add a comment |
I came up with this answer:
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption].options[0] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
The false outcome was overwriting the top level property and recreating it without its label. Not sure if there is a better way here.
answered Nov 12 at 13:53
Tom Rudge
1,56332752
I came up with this answer:
if (this.state.hasCreatedOption) {
options[this.state.hasCreatedOption].options[0] = newOption;
} else {
options.map(option => {
if (option.label === "New group") {
return {
label: option.label,
options: option.options.push(newOption)
};
}
return option;
});
}
hasCreatedOption = options.length - 1;
The false outcome was overwriting the top level property and recreating it without its label. Not sure if there is a better way here.
answered Nov 12 at 13:53
Tom Rudge
1,56332752
answered Nov 12 at 13:53
Tom Rudge
1,56332752
answered Nov 12 at 13:53
Tom Rudge
1,56332752
answered Nov 12 at 13:53
Tom Rudge
1,56332752
1,56332752
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53261367%2fhandling-map-and-if-else-statement-for-react-render-using-react-select%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
