Develop Reference

React-select get selected option label as strin

When trying to use an icon for an option it seems to be passed as JSX in the onChange handler. Anyway to get hold of original label in option prior to injecting image in the onChange handler? Or is there a way to get hold of index of selected option.
Here's a sample https://codesandbox.io/s/react-select-label-icon-forked-52djv

Using formatOptionWithImage solves the problem.
Example
https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q

Where is the value of an input stored after changing it in browser?

I am using Reactjs with bootstrap, it has an input field of text which use bootstrap-datepicker to choose date.
After I choose a date, the value of the input field is not stored, so the state of reactjs component cannot be changed. I didn't see a change in the dom's value, text or anything, so where is this value changed and why reactjs cannot detect the change?
I am using an input and javascript to load the picker:
$('.date-input').datepicker();
Thanks.

I haven't personally used bootstrap for my development, but generally the content of the input box is stored in two ways when it comes to react.
defaultValue
value.
If you provide a defaultValue and dont assign a onChange function to it then the input box will be a readOnly textbox.
To change the content of the input box provide a onChange event where you set the content state of the input box. In this way you can change the value inside the input box.
So from the looks of it in your case, set the state of the input box component from your datepicker to change the value of the input box component.

Why does React pre-populate input tags with the last keyboard input?

I have created a list of input tags wrapped in a div to produce an editable text list.
However, when I add a new element to this list by hitting Enter, the new empty element is automatically populated with the last keyboard input, instead of being blank.
Here is a link the JsBin describing the issue:
https://jsbin.com/kovipurace/edit?html,output
I am expecting an empty input instead.
Is there a way to implement the expected behaviour correctly?
I initially based my code off of the CommentForm in the react tutorial, but I have deliberately not used a form tag to give cleaner use of the hitting the Enter key (don't want to mess around with e.preventDefault() etc.) I have also put in additional functionality in the actual version to allow updating existing values using an onBlur event.
What I have tried:
I have (correctly, hopefully!) implemented controlled components as stated in the docs.
I have experimented with using defaultValue and instead of value but the effect is the same. In both cases I am using {this.props.value}

You create new textentries with textEntry text.
keyHasBeenPressed : function(e) {
if (e.keyCode == 13) {
var textEntry = this.refs.textEntry.value;
this.props.createEntry(textEntry);
}
},
All you need is to make the args of createEntry blank.
this.props.createEntry();
https://jsbin.com/daqura/1/edit?html,output

I found help on #reactjs IRC channel and commenters here.
In the keyHasBeenPressed function, the state needs to be set explicitly again, as it is in handleChange.
getInitialState is just used to intialize state once in a component's life cycle.

jQuery change function, how to save the state like a session

I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.

What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary

Javascript: Reset the selected focus on an element that is being rerendered

I'm using dust.js in order to render Javascript templates to HTML. Using dust.js, I've basically broken my page into template components, that are rerendered in response to certain events. One such component/template conceptually looks as follow:
[Label] [Input1] [Input2] [Input3]
All 3 inputs in this component have an onBlur event which is used to recalculate the value of the other inputs and which in turn causes the template to rerender. So for instance, if the user modified the value of Input1, both Input2 and Input3's values will be adjusted and rerendered.
The reason I rerender the template instead of just setting the values is that the template contains additional logic and elements that are rendered depending on the values (so for instance, certain values would result in an error message being rendered or an additional field being displayed).
So far so good, but this causes a focus problem. Take for example if the user modifies Input1 and then clicks on Input2. The onBlur will trigger, I'll update the values of Input2 and Input3 and then rerender the template. This in turn will cause the user's focus to be discarded, and they'll have to click on Input2 again.
I need a way to know that the user clicked on Input2 so that I can set the focus to it after the rerendering has been completed. As the onBlur event triggers before onFocus, I can't think of any way to do this.
Is there any solution other than bypassing the template rendering?

I had a similar problem. I solved it by delaying the "blur" event listener function with about 100ms, to allow the focus event on another input to fire before the blur handler starts rendering.