How do I conditionally render one of three components using a select tag?
I'm trying to practice conditional rendering. I have three separate address components that are formatted in three different ways.
In the main component, App.js, I hold state for all the address fields and one for format. At the bottom of the form I have a select tag to choose one of three formats.
I have two problems, to update all fields, in my handleChange I am using computed property names in setState and a separate call to setState when I click the select tag to change format.
handleChange(e) {
this.setState({ [e.target.name]: e.target.value })
console.log(this.state)
this.setState({format: e.target.value})
Upon entering info, my component is rendered, yet zip is '', and format is 'New York' for example. This is from auto-fill. Entering each field separately, still leaves incomplete data in state. I understand that setState is an asynchronous function, and that in this case using the functional style is preferable to the object format. How do I use computed property names and values in the functional approach?
The codesandbox is Here
App.js, select tag and button
<select value={format} onChange={this.handleChange}>
<option name="format1" value="format1">
format1
</option>
<option name="format2" value="format2">
format2
</option>
<option name="format3" value="format3">
format3
</option>
</select>
<button
variant="contained"
color="primary"
onClick={this.handleSubmit}
>
Submit
</button>
</form>
</div>
<div>
<AddressComponent
name={name}
street1={street1}
street2={street2}
city={city}
state={state}
zip={zip}
format={format}
>
{this.props.children}
</AddressComponent>
</div>
AddressComponent
const AddressComponent = props => {
return (
<div>
{(() => {
switch (true) {
case props.format === "format1":
return <AddressFormat1 {...props} />;
case props.format === "format2":
return <AddressFormat2 {...props} />;
case props.format === "format3":
return <AddressFormat3 {...props} />;
default:
return <AddressFormat1 {...props} />;
}
})()}
</div>
);
};
javascript reactjs forms
asked Nov 20 at 17:27
Kevin T.
679
add a comment |
I'm trying to practice conditional rendering. I have three separate address components that are formatted in three different ways.
In the main component, App.js, I hold state for all the address fields and one for format. At the bottom of the form I have a select tag to choose one of three formats.
I have two problems, to update all fields, in my handleChange I am using computed property names in setState and a separate call to setState when I click the select tag to change format.
handleChange(e) {
this.setState({ [e.target.name]: e.target.value })
console.log(this.state)
this.setState({format: e.target.value})
Upon entering info, my component is rendered, yet zip is '', and format is 'New York' for example. This is from auto-fill. Entering each field separately, still leaves incomplete data in state. I understand that setState is an asynchronous function, and that in this case using the functional style is preferable to the object format. How do I use computed property names and values in the functional approach?
The codesandbox is Here
App.js, select tag and button
<select value={format} onChange={this.handleChange}>
<option name="format1" value="format1">
format1
</option>
<option name="format2" value="format2">
format2
</option>
<option name="format3" value="format3">
format3
</option>
</select>
<button
variant="contained"
color="primary"
onClick={this.handleSubmit}
>
Submit
</button>
</form>
</div>
<div>
<AddressComponent
name={name}
street1={street1}
street2={street2}
city={city}
state={state}
zip={zip}
format={format}
>
{this.props.children}
</AddressComponent>
</div>
AddressComponent
const AddressComponent = props => {
return (
<div>
{(() => {
switch (true) {
case props.format === "format1":
return <AddressFormat1 {...props} />;
case props.format === "format2":
return <AddressFormat2 {...props} />;
case props.format === "format3":
return <AddressFormat3 {...props} />;
default:
return <AddressFormat1 {...props} />;
}
})()}
</div>
);
};
javascript reactjs forms
asked Nov 20 at 17:27
Kevin T.
679
sorry, what are you asking for is unclear.
– Bhojendra Rauniyar
Nov 20 at 17:32
I don't see the problem, the code sandbox seems to work just fine. My browser (Safari) doesn't auto-fill the fields. Which browser do you have issues with?
– Patrick Hund
Nov 20 at 17:33
I want to use the functional approach to setting state in this instance. How to I use prevState?
– Kevin T.
Nov 20 at 17:38
1
I see. You don't have to use functional components all the time, class components do have their valid use cases, and having a component state is definitely one of the most valid. That being said, with the current alpha version of React, you can use the “Hooks” API to introduce state to functional components: reactjs.org/docs/hooks-intro.html – currently everybody and their grandma is very excited over this in React land, but I would not recommend using the alpha version in production
– Patrick Hund
Nov 20 at 17:54
add a comment |
I'm trying to practice conditional rendering. I have three separate address components that are formatted in three different ways.
In the main component, App.js, I hold state for all the address fields and one for format. At the bottom of the form I have a select tag to choose one of three formats.
I have two problems, to update all fields, in my handleChange I am using computed property names in setState and a separate call to setState when I click the select tag to change format.
handleChange(e) {
this.setState({ [e.target.name]: e.target.value })
console.log(this.state)
this.setState({format: e.target.value})
Upon entering info, my component is rendered, yet zip is '', and format is 'New York' for example. This is from auto-fill. Entering each field separately, still leaves incomplete data in state. I understand that setState is an asynchronous function, and that in this case using the functional style is preferable to the object format. How do I use computed property names and values in the functional approach?
The codesandbox is Here
App.js, select tag and button
<select value={format} onChange={this.handleChange}>
<option name="format1" value="format1">
format1
</option>
<option name="format2" value="format2">
format2
</option>
<option name="format3" value="format3">
format3
</option>
</select>
<button
variant="contained"
color="primary"
onClick={this.handleSubmit}
>
Submit
</button>
</form>
</div>
<div>
<AddressComponent
name={name}
street1={street1}
street2={street2}
city={city}
state={state}
zip={zip}
format={format}
>
{this.props.children}
</AddressComponent>
</div>
AddressComponent
const AddressComponent = props => {
return (
<div>
{(() => {
switch (true) {
case props.format === "format1":
return <AddressFormat1 {...props} />;
case props.format === "format2":
return <AddressFormat2 {...props} />;
case props.format === "format3":
return <AddressFormat3 {...props} />;
default:
return <AddressFormat1 {...props} />;
}
})()}
</div>
);
};
javascript reactjs forms
asked Nov 20 at 17:27
Kevin T.
679
I'm trying to practice conditional rendering. I have three separate address components that are formatted in three different ways.
In the main component, App.js, I hold state for all the address fields and one for format. At the bottom of the form I have a select tag to choose one of three formats.
I have two problems, to update all fields, in my handleChange I am using computed property names in setState and a separate call to setState when I click the select tag to change format.
handleChange(e) {
this.setState({ [e.target.name]: e.target.value })
console.log(this.state)
this.setState({format: e.target.value})
Upon entering info, my component is rendered, yet zip is '', and format is 'New York' for example. This is from auto-fill. Entering each field separately, still leaves incomplete data in state. I understand that setState is an asynchronous function, and that in this case using the functional style is preferable to the object format. How do I use computed property names and values in the functional approach?
The codesandbox is Here
App.js, select tag and button
<select value={format} onChange={this.handleChange}>
<option name="format1" value="format1">
format1
</option>
<option name="format2" value="format2">
format2
</option>
<option name="format3" value="format3">
format3
</option>
</select>
<button
variant="contained"
color="primary"
onClick={this.handleSubmit}
>
Submit
</button>
</form>
</div>
<div>
<AddressComponent
name={name}
street1={street1}
street2={street2}
city={city}
state={state}
zip={zip}
format={format}
>
{this.props.children}
</AddressComponent>
</div>
AddressComponent
const AddressComponent = props => {
return (
<div>
{(() => {
switch (true) {
case props.format === "format1":
return <AddressFormat1 {...props} />;
case props.format === "format2":
return <AddressFormat2 {...props} />;
case props.format === "format3":
return <AddressFormat3 {...props} />;
default:
return <AddressFormat1 {...props} />;
}
})()}
</div>
);
};
javascript reactjs forms
javascript reactjs forms
asked Nov 20 at 17:27
Kevin T.
679
asked Nov 20 at 17:27
Kevin T.
679
asked Nov 20 at 17:27
Kevin T.
679
asked Nov 20 at 17:27
Kevin T.
679
asked Nov 20 at 17:27
Kevin T.
679
679
sorry, what are you asking for is unclear.
– Bhojendra Rauniyar
Nov 20 at 17:32
I don't see the problem, the code sandbox seems to work just fine. My browser (Safari) doesn't auto-fill the fields. Which browser do you have issues with?
– Patrick Hund
Nov 20 at 17:33
I want to use the functional approach to setting state in this instance. How to I use prevState?
– Kevin T.
Nov 20 at 17:38
1
I see. You don't have to use functional components all the time, class components do have their valid use cases, and having a component state is definitely one of the most valid. That being said, with the current alpha version of React, you can use the “Hooks” API to introduce state to functional components: reactjs.org/docs/hooks-intro.html – currently everybody and their grandma is very excited over this in React land, but I would not recommend using the alpha version in production
– Patrick Hund
Nov 20 at 17:54
add a comment |
sorry, what are you asking for is unclear.
– Bhojendra Rauniyar
Nov 20 at 17:32
I don't see the problem, the code sandbox seems to work just fine. My browser (Safari) doesn't auto-fill the fields. Which browser do you have issues with?
– Patrick Hund
Nov 20 at 17:33
I want to use the functional approach to setting state in this instance. How to I use prevState?
– Kevin T.
Nov 20 at 17:38
1
I see. You don't have to use functional components all the time, class components do have their valid use cases, and having a component state is definitely one of the most valid. That being said, with the current alpha version of React, you can use the “Hooks” API to introduce state to functional components: reactjs.org/docs/hooks-intro.html – currently everybody and their grandma is very excited over this in React land, but I would not recommend using the alpha version in production
– Patrick Hund
Nov 20 at 17:54
sorry, what are you asking for is unclear.
– Bhojendra Rauniyar
Nov 20 at 17:32
sorry, what are you asking for is unclear.
– Bhojendra Rauniyar
Nov 20 at 17:32
I don't see the problem, the code sandbox seems to work just fine. My browser (Safari) doesn't auto-fill the fields. Which browser do you have issues with?
– Patrick Hund
Nov 20 at 17:33
I don't see the problem, the code sandbox seems to work just fine. My browser (Safari) doesn't auto-fill the fields. Which browser do you have issues with?
– Patrick Hund
Nov 20 at 17:33
I want to use the functional approach to setting state in this instance. How to I use prevState?
– Kevin T.
Nov 20 at 17:38
I want to use the functional approach to setting state in this instance. How to I use prevState?
– Kevin T.
Nov 20 at 17:38
1
1
I see. You don't have to use functional components all the time, class components do have their valid use cases, and having a component state is definitely one of the most valid. That being said, with the current alpha version of React, you can use the “Hooks” API to introduce state to functional components: reactjs.org/docs/hooks-intro.html – currently everybody and their grandma is very excited over this in React land, but I would not recommend using the alpha version in production
– Patrick Hund
Nov 20 at 17:54
I see. You don't have to use functional components all the time, class components do have their valid use cases, and having a component state is definitely one of the most valid. That being said, with the current alpha version of React, you can use the “Hooks” API to introduce state to functional components: reactjs.org/docs/hooks-intro.html – currently everybody and their grandma is very excited over this in React land, but I would not recommend using the alpha version in production
– Patrick Hund
Nov 20 at 17:54
add a comment |
active
oldest
votes
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%2f53398378%2fhow-do-i-conditionally-render-one-of-three-components-using-a-select-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53398378%2fhow-do-i-conditionally-render-one-of-three-components-using-a-select-tag%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
sorry, what are you asking for is unclear.
– Bhojendra Rauniyar
Nov 20 at 17:32
I don't see the problem, the code sandbox seems to work just fine. My browser (Safari) doesn't auto-fill the fields. Which browser do you have issues with?
– Patrick Hund
Nov 20 at 17:33
I want to use the functional approach to setting state in this instance. How to I use prevState?
– Kevin T.
Nov 20 at 17:38
1
I see. You don't have to use functional components all the time, class components do have their valid use cases, and having a component state is definitely one of the most valid. That being said, with the current alpha version of React, you can use the “Hooks” API to introduce state to functional components: reactjs.org/docs/hooks-intro.html – currently everybody and their grandma is very excited over this in React land, but I would not recommend using the alpha version in production
– Patrick Hund
Nov 20 at 17:54