Adding tag inside a tag after clicking an option on React.js Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experience Should we burninate the [wrap] tag?Editable 'Select' elementHow do you remove all the options of a select box and then add one option and select it with jQuery?What is the best way to add options to a select from as a JS object with jQuery?jQuery get specific option tag textAdding options to a <select> using jQuery?Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQueryjQuery: Get selected element tag nameDetecting if textarea content is selected using javascriptjQuery Get Selected Option From DropdownReact JSX: selecting “selected” on selected <select> optionGet value of a selected option in an label with Javascript
What does the "x" in "x86" represent?
What's the purpose of writing one's academic bio in 3rd person?
What makes black pepper strong or mild?
Why is "Consequences inflicted." not a sentence?
Why did the IBM 650 use bi-quinary?
Right-skewed distribution with mean equals to mode?
Java 8 stream max() function argument type Comparator vs Comparable
Output the ŋarâþ crîþ alphabet song without using (m)any letters
Does accepting a pardon have any bearing on trying that person for the same crime in a sovereign jurisdiction?
When -s is used with third person singular. What's its use in this context?
What are the motives behind Cersei's orders given to Bronn?
Can Pao de Queijo, and similar foods, be kosher for Passover?
How much radiation do nuclear physics experiments expose researchers to nowadays?
What is the longest distance a 13th-level monk can jump while attacking on the same turn?
Should I discuss the type of campaign with my players?
Is there a service that would inform me whenever a new direct route is scheduled from a given airport?
How do I keep my slimes from escaping their pens?
Withdrew £2800, but only £2000 shows as withdrawn on online banking; what are my obligations?
IndentationError when pasting code in Python 3 interpreter mode
Are my PIs rude or am I just being too sensitive?
Letter Boxed validator
Should gear shift center itself while in neutral?
If Jon Snow became King of the Seven Kingdoms what would his regnal number be?
Sorting numerically
Adding
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experience
Should we burninate the [wrap] tag?Editable 'Select' elementHow do you remove all the options of a select box and then add one option and select it with jQuery?What is the best way to add options to a select from as a JS object with jQuery?jQuery get specific option tag textAdding options to a <select> using jQuery?Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQueryjQuery: Get selected element tag nameDetecting if textarea content is selected using javascriptjQuery Get Selected Option From DropdownReact JSX: selecting “selected” on selected <select> optionGet value of a selected option in an label with Javascript
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
So basically, I got the following JSX file and I want to have an event handler that listens to an event that is generated after clicking "Other" in the manufacturer section. Please find the mentioned option as the last <option> tag inside the <select> tag with the name "colour", and inside the <Fragment> tag. Also, please ignore the OnClick function that is already there; it has no use in this problem.
The event that I want to be generated is quite particular. It should add a text area (or input, not entirely sure) where the "Other" option inside the drop-down menu is located so that the user is able to type the other option they didn't find in the current selection of colours.
How would I be able to achieve this?
import React, Fragment from 'react';
import StyledSection, StyledSectionColLeft, StyledSectionCol from '../../../common/theme/cssStyledColumns';
import Textarea, Select, Input, MandatoryInfo from '../../../common/form';
const ApplianceDetails = () => (
<Fragment>
<h2>Appliance details</h2>
<MandatoryInfo />
<StyledSection>
<StyledSectionColLeft>
<Select name="colour" label="Colour *">
<option value="">-Select-</option>
<option value="Vokera">Blue</option>
<option value="Warmflow">Red</option>
<option value="Worcester">Yellow</option>
<option onClick=console.log('Click happened') value="Other">Other</option>
</Select>
<Input name="model" label="Model *" />
</StyledSectionColLeft>
<StyledSectionCol>
<Input name="location" label="Location *" />
</StyledSectionCol>
</StyledSection>
</Fragment>
);
export default ApplianceDetails;
javascript reactjs forms drop-down-menu jsx
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
add a comment |
So basically, I got the following JSX file and I want to have an event handler that listens to an event that is generated after clicking "Other" in the manufacturer section. Please find the mentioned option as the last <option> tag inside the <select> tag with the name "colour", and inside the <Fragment> tag. Also, please ignore the OnClick function that is already there; it has no use in this problem.
The event that I want to be generated is quite particular. It should add a text area (or input, not entirely sure) where the "Other" option inside the drop-down menu is located so that the user is able to type the other option they didn't find in the current selection of colours.
How would I be able to achieve this?
import React, Fragment from 'react';
import StyledSection, StyledSectionColLeft, StyledSectionCol from '../../../common/theme/cssStyledColumns';
import Textarea, Select, Input, MandatoryInfo from '../../../common/form';
const ApplianceDetails = () => (
<Fragment>
<h2>Appliance details</h2>
<MandatoryInfo />
<StyledSection>
<StyledSectionColLeft>
<Select name="colour" label="Colour *">
<option value="">-Select-</option>
<option value="Vokera">Blue</option>
<option value="Warmflow">Red</option>
<option value="Worcester">Yellow</option>
<option onClick=console.log('Click happened') value="Other">Other</option>
</Select>
<Input name="model" label="Model *" />
</StyledSectionColLeft>
<StyledSectionCol>
<Input name="location" label="Location *" />
</StyledSectionCol>
</StyledSection>
</Fragment>
);
export default ApplianceDetails;
javascript reactjs forms drop-down-menu jsx
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
Possible duplicate of Editable 'Select' element
– SylvainF
Mar 8 at 16:31
add a comment |
So basically, I got the following JSX file and I want to have an event handler that listens to an event that is generated after clicking "Other" in the manufacturer section. Please find the mentioned option as the last <option> tag inside the <select> tag with the name "colour", and inside the <Fragment> tag. Also, please ignore the OnClick function that is already there; it has no use in this problem.
The event that I want to be generated is quite particular. It should add a text area (or input, not entirely sure) where the "Other" option inside the drop-down menu is located so that the user is able to type the other option they didn't find in the current selection of colours.
How would I be able to achieve this?
import React, Fragment from 'react';
import StyledSection, StyledSectionColLeft, StyledSectionCol from '../../../common/theme/cssStyledColumns';
import Textarea, Select, Input, MandatoryInfo from '../../../common/form';
const ApplianceDetails = () => (
<Fragment>
<h2>Appliance details</h2>
<MandatoryInfo />
<StyledSection>
<StyledSectionColLeft>
<Select name="colour" label="Colour *">
<option value="">-Select-</option>
<option value="Vokera">Blue</option>
<option value="Warmflow">Red</option>
<option value="Worcester">Yellow</option>
<option onClick=console.log('Click happened') value="Other">Other</option>
</Select>
<Input name="model" label="Model *" />
</StyledSectionColLeft>
<StyledSectionCol>
<Input name="location" label="Location *" />
</StyledSectionCol>
</StyledSection>
</Fragment>
);
export default ApplianceDetails;
javascript reactjs forms drop-down-menu jsx
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
So basically, I got the following JSX file and I want to have an event handler that listens to an event that is generated after clicking "Other" in the manufacturer section. Please find the mentioned option as the last <option> tag inside the <select> tag with the name "colour", and inside the <Fragment> tag. Also, please ignore the OnClick function that is already there; it has no use in this problem.
The event that I want to be generated is quite particular. It should add a text area (or input, not entirely sure) where the "Other" option inside the drop-down menu is located so that the user is able to type the other option they didn't find in the current selection of colours.
How would I be able to achieve this?
import React, Fragment from 'react';
import StyledSection, StyledSectionColLeft, StyledSectionCol from '../../../common/theme/cssStyledColumns';
import Textarea, Select, Input, MandatoryInfo from '../../../common/form';
const ApplianceDetails = () => (
<Fragment>
<h2>Appliance details</h2>
<MandatoryInfo />
<StyledSection>
<StyledSectionColLeft>
<Select name="colour" label="Colour *">
<option value="">-Select-</option>
<option value="Vokera">Blue</option>
<option value="Warmflow">Red</option>
<option value="Worcester">Yellow</option>
<option onClick=console.log('Click happened') value="Other">Other</option>
</Select>
<Input name="model" label="Model *" />
</StyledSectionColLeft>
<StyledSectionCol>
<Input name="location" label="Location *" />
</StyledSectionCol>
</StyledSection>
</Fragment>
);
export default ApplianceDetails;
javascript reactjs forms drop-down-menu jsx
javascript reactjs forms drop-down-menu jsx
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
asked Mar 8 at 16:19
Adrian Martinez MorenoAdrian Martinez Moreno
82
82
Possible duplicate of Editable 'Select' element
– SylvainF
Mar 8 at 16:31
add a comment |
Possible duplicate of Editable 'Select' element
– SylvainF
Mar 8 at 16:31
Possible duplicate of Editable 'Select' element
– SylvainF
Mar 8 at 16:31
Possible duplicate of Editable 'Select' element
– SylvainF
Mar 8 at 16:31
add a comment |
1 Answer
1
active
oldest
votes
You can set a class on an input/textarea based on the value of select. Like this:
<Select value=this.state.selectedOption onChange=this.handleSelect name="colour" label="Colour *">
<option value="">-Select-</option>
<option value="Vokera">Blue</option>
<option value="Warmflow">Red</option>
<option value="Worcester">Yellow</option>
<option value="Other">Other</option>
</Select>
// Or textarea
<input type="text" value="" name=" className=this.state.selectedOption !== 'Other'?"hidden":""/>
This adds a class of hidden to your input. Now you can use .hidden diplay:none;
And this function will handle change of your values:
handleSelect(evt)
this.setState(
selectedOption: evt.target.value
)
answered Mar 8 at 16:29
Anurag SrivastavaAnurag Srivastava
2,14021220
My console in the browser (Google Chrome) is displaying the following error:Parsing error: Unexpected token, expected ";"So I changed your syntax and wrote:handleSelect = (evt) => this.setState( selectedOption: evt.target.value )but it didn't work and I'm getting the following error:'handleSelect' is not defined no-undefAny thoughts?
– Adrian Martinez Moreno
Mar 8 at 17:32
Have you addedthis.handleSelect = this.handleSelect.bind(this);in the constructor?
– Anurag Srivastava
Mar 8 at 17:35
Yes, I did. I added thethis.handleSelect = this.handleSelect.bind(this);part inside myonChangeevent inside my select tag and the first error I get is the classicParsing error: Unexpected token, expected "}"point out the semicolon. I remove the semicolon and I get the following:Line 69: Parsing error: Unexpected token, expected ";"> 69 | handleSelect(evt)
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%2f55067102%2fadding-textarea-tag-inside-a-select-tag-after-clicking-an-option-on-react-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can set a class on an input/textarea based on the value of select. Like this:
<Select value=this.state.selectedOption onChange=this.handleSelect name="colour" label="Colour *">
<option value="">-Select-</option>
<option value="Vokera">Blue</option>
<option value="Warmflow">Red</option>
<option value="Worcester">Yellow</option>
<option value="Other">Other</option>
</Select>
// Or textarea
<input type="text" value="" name=" className=this.state.selectedOption !== 'Other'?"hidden":""/>
This adds a class of hidden to your input. Now you can use .hidden diplay:none;
And this function will handle change of your values:
handleSelect(evt)
this.setState(
selectedOption: evt.target.value
)
You can set a class on an input/textarea based on the value of select. Like this:
<Select value=this.state.selectedOption onChange=this.handleSelect name="colour" label="Colour *">
<option value="">-Select-</option>
<option value="Vokera">Blue</option>
<option value="Warmflow">Red</option>
<option value="Worcester">Yellow</option>
<option value="Other">Other</option>
</Select>
// Or textarea
<input type="text" value="" name=" className=this.state.selectedOption !== 'Other'?"hidden":""/>
This adds a class of hidden to your input. Now you can use .hidden diplay:none;
And this function will handle change of your values:
handleSelect(evt)
this.setState(
selectedOption: evt.target.value
)
answered Mar 8 at 16:29
Anurag SrivastavaAnurag Srivastava
2,14021220
answered Mar 8 at 16:29
Anurag SrivastavaAnurag Srivastava
2,14021220
answered Mar 8 at 16:29
Anurag SrivastavaAnurag Srivastava
2,14021220
2,14021220
My console in the browser (Google Chrome) is displaying the following error:Parsing error: Unexpected token, expected ";"So I changed your syntax and wrote:handleSelect = (evt) => this.setState( selectedOption: evt.target.value )but it didn't work and I'm getting the following error:'handleSelect' is not defined no-undefAny thoughts?
– Adrian Martinez Moreno
Mar 8 at 17:32
Have you addedthis.handleSelect = this.handleSelect.bind(this);in the constructor?
– Anurag Srivastava
Mar 8 at 17:35
Yes, I did. I added thethis.handleSelect = this.handleSelect.bind(this);part inside myonChangeevent inside my select tag and the first error I get is the classicParsing error: Unexpected token, expected ""point out the semicolon. I remove the semicolon and I get the following:Line 69: Parsing error: Unexpected token, expected ";"> 69 | handleSelect(evt) ^I think it's caused by a syntax error. Any thoughts?
– Adrian Martinez Moreno
Mar 11 at 9:22
Edit: The first time, the console is pointing out the semicolon and the second time it's pointing out the parenthesis just after thehandleSelect(evt)name of the function
– Adrian Martinez Moreno
Mar 11 at 9:34
add a comment " point out the semicolon. I remove the semicolon and I get the following:
Line 69: Parsing error: Unexpected token, expected ";" > 69 | handleSelect(evt) " point out the semicolon. I remove the semicolon and I get the following: Line 69: Parsing error: Unexpected token, expected ";" > 69 | handleSelect(evt) " point out the semicolon. I remove the semicolon and I get the following: Line 69: Parsing error: Unexpected token, expected ";" > 69 | handleSelect(evt){ | ^ I think it's caused by a syntax error. Any thoughts?– Adrian Martinez Moreno
Mar 11 at 9:22
Edit: The first time, the console is pointing out the semicolon and the second time it's pointing out the parenthesis just after the
handleSelect(evt) name of the function– Adrian Martinez Moreno
Mar 11 at 9:34
Edit: The first time, the console is pointing out the semicolon and the second time it's pointing out the parenthesis just after the
handleSelect(evt) name of the function– Adrian Martinez Moreno
Mar 11 at 9:34
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.
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%2f55067102%2fadding-textarea-tag-inside-a-select-tag-after-clicking-an-option-on-react-js%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
Possible duplicate of Editable 'Select' element
– SylvainF
Mar 8 at 16:31