Ufdjrw

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 tag inside a tag after clicking an option on React.js

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

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

share|improve this question

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 | 

0

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

share|improve this question

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

share|improve this question

asked Mar 8 at 16:19

Adrian Martinez MorenoAdrian Martinez Moreno

82

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;

share|improve this question

asked Mar 8 at 16:19

Adrian Martinez MorenoAdrian Martinez Moreno

82

share|improve this question

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

1 Answer
1

active

oldest

votes

0

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
 )

share|improve this answer

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-undef Any thoughts?
  
  – Adrian Martinez Moreno
  Mar 8 at 17:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you added this.handleSelect = this.handleSelect.bind(this); in the constructor?
  
  – Anurag Srivastava
  Mar 8 at 17:35
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I did. I added the this.handleSelect = this.handleSelect.bind(this); part inside my onChange event inside my select tag and the first error I get is the classic Parsing 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
);



);

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

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
 )

share" point out the semicolon. I remove the semicolon and I get the following: Line 69: Parsing error: Unexpected token, expected ";" > 69 | handleSelect(evt) 

0

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
 )

share" point out the semicolon. I remove the semicolon and I get the following: Line 69: Parsing error: Unexpected token, expected ";" > 69 | handleSelect(evt)improve this answer

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-undef Any thoughts?
  
  – Adrian Martinez Moreno
  Mar 8 at 17:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Have you added this.handleSelect = this.handleSelect.bind(this); in the constructor?
  
  – Anurag Srivastava
  Mar 8 at 17:35
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I did. I added the this.handleSelect = this.handleSelect.bind(this); part inside my onChange event inside my select tag and the first error I get is the classic Parsing 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 the handleSelect(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 | 

draft saved

draft discarded

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.

draft saved

draft discarded

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

Name

Email

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

Name

Email

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

Name

Email

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

Name

Email

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

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here