82987

How to get value of selected option in react-bootstrap select FromControl

Question:

I'm trying to write what the user selects from a dropdown to a firebase database based off the value stored in the component state, but I can't figure out how to get the value of the selected option and update it to the storeType state

Here is my dropdown menu:

<FormGroup> <FormControl componentClass="select" placeholder="Store type" onChange={this.handleCatChange} > <option value="placeholder">Choose eatery type...</option> <option value="cafe">Cafe</option> <option value="bakery">Bakery</option> <option value="pizza">Pizza store</option> <option value="sushi">Sushi store</option> <option value="buffet">Buffet</option> <option value="donut">Donut store</option> <option value="other">Other</option> </FormControl> </FormGroup>

<strong>this.handleCatChange:</strong>

handleCatChange(e) { this.setState({ storeType: e.target.value }) console.log(this.state.storeType) }

Answer1:

Your state is valid, but not when you do your console.log. It's because setState is asynchronous and does not mutate immediately your state values.

According to <a href="https://facebook.github.io/react/docs/react-component.html#setstate" rel="nofollow">the docs</a>,

<blockquote>

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

</blockquote>

If you need to ensure ordering of events after a setState call is made, you can pass a callback function.

<h3>this.handleCatChange</h3> handleCatChange(e) { this.setState({ storeType: e.target.value }, () => console.log(this.state.storeType)) }

Answer2:

<blockquote>

you need to bind your function like this ..

</blockquote> onChange={this.handleCatChange.bind(this)} constructor () { super(); this.state = { storeType: '' }; } handleCatChange(e) { const type = e.target.value; this.setState({ storeType:type }); }

Recommend

  • How to check that @Async call completed in Spring?
  • react native circle transform translate animation
  • Setting errors on a FormGroup instance in Angular Reactive Forms not working as expected
  • ERROR Error: ExpressionChangedAfterItHasBeenCheckedError in Angular 5
  • Allow Input Quantity Based On Available Quantity in Reactive Forms
  • How to access 'this' element from event handler passed into scalatags?
  • Get value of selected drop down list item
  • Angular 2 Form Async validation ajax call on every keypress
  • How would you model data variables variance on common scheme? SQL
  • Composite Pattern Reuse For Different Types
  • Pandas plotting two graphs on one scale
  • Fluent Nhibernate: Trying to create entity with composite key that is also the keys for two referenc
  • How to upload excel file in angular js?
  • Need advice in designing tables in SQL-Server
  • JFreeChart BarChart - Category Markers
  • Html select multiple get all values at onchange event
  • Regex: Match everything except backreference
  • PostgreSQL 9.1 timezones
  • ResponseBuilder is not working when used with entity object
  • python & Mysql: unsupported operand type(s) for -: 'int' and 'tuple'
  • Escaping single quotes in JDBC with MySql
  • How to plot large time series (thousands of administration times/doses of a medication)?
  • SyntaxError: (irb):26: both block arg and actual block given
  • How to make R's read_csv2() recognise the text characters properly
  • How do I display a dialog that asks the user multi-choice questıon using tkInter?
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Android Activity.onWindowFocusChanged doesn't get called from within TabHost
  • C: Incompatible pointer type initializing
  • Scrapy recursive link crawler
  • How to rebase a series of branches?
  • ORA-29908: missing primary invocation for ancillary operator
  • How to get next/previous record number?
  • Compare two NSDates in iPhone
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do you join a server to an Active Directory (domain)?
  • How do I configure my settings file to work with unit tests?
  • How does Linux kernel interrupt the application?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs