Develop Reference

How can I store a selected value in react combobox

I created a combobox with react. How do I assign a value selected in the combobox to a variable or can I store it? Is there any example for this?
const PPP1 = props => {
return (
<div className='padding-div'>
<FormGroup controlId="exampleForm.SelectCustom" className='col-8'>
<FormLabel>1- Select Sector</FormLabel>
<FormControl as="select" custom>
<option> </option>
<option>Agriculture</option>
<option>Mining</option>
<option>Information</option>
<option>Finance</option>
<option>Real Estate</option>
<option>Other</option>
</FormControl>
</FormGroup>
</div>
)
}
export default PPP1

You might considering adding onChange props on FormControl component. Ie on this
const handleChange = (event) => {
setState({ ...state, [event.target.name]: event.target.checked });}
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
label="Gilad Gray"/>

If the FormControl object is rendered into a regular <select> tag, you could do the following:
Declare your state:
state = {
selectedData: '',
}
Then implement onChange function:
onChange = e => {
this.setState({ selectedData: e.target.value });
}
And then bind the function:
<FormControl as="select" custom onChange={ this.onChange} >
In the end, you could access the result, calling this.state.selectedData
Edit: I didn't notice that you use Function component, my solution is for a class component, but it could be easily translated. Please let me know if you need help doing that.

ReactSelect - closeOnMenuSelect closes the menu on select even when set to false

I have a react-select component field. I have provided react-select with the following props closeOnMenuSelect={false} && isMulti. Which, theoretically should make the select component not close the menu on selecting an item, but for some reason it does close.
Very weird thing is, everywhere else, I have used that same config for the select component I get it working just fine.
Here is the react-select config:
<Field
name={`${keyField}.${index}.permissions`}
render={({ field: { value, name }, form: { setFieldValue, setFieldTouched } }) => (
<div>
<label htmlFor="namespace-permissions">
Permissions in Namespace <span className="text-danger">*</span>
</label>
<Select
isMulti
closeMenuOnSelect={false}
id="namespace-permissions"
defaultValue={convertNamespaceToDefaultValue(
dependencies.namespacePermissions,
value
)}
options={convertNamespaceToSelect(dependencies.namespacePermissions)}
onChangeCallback={values => {
setFieldValue(name, convertSelectToNamespacesData(values));
setFieldTouched(name, true);
}}
/>
<ErrorMessage name={name} component={FormErrorMessage} />
</div>
)}
/>
Why is it NOT working? And why is the exact same config on another react-select works perfectly without a hitch?
I have update the Description, to show that the react-select is wrapped in a Formik Field. As I said, this is a technique I have used in other parts of my code, but this one, isn't working.

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>
);
};

Unexpected behavior with material ui Select and 'redux-form'

I have a simple 'redux form' with a Select component from newest material-ui-next.
import { TextField } from 'material-ui';
<Field
name="name"
component={TextField}
select
>
<MenuItem value={1}>Lily</MenuItem>
<MenuItem value={2}>Mark</MenuItem>
</Field>
Works fine. Hovewer, if I change the value prop from typeof number to string, e.g.
<Field
name="name"
component={TextField}
select
>
<MenuItem value="lily">Lily</MenuItem>
<MenuItem value="mark">Mark</MenuItem>
</Field>
the value changes properly, but just after one second, the value becomes 0 (as it was initially), and the selected value disappears (it's empty from now on). It had a correct value just for a moment, but somehow it's being automatically set back to 0.
Even tried with rendering the field:
const renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
<TextField
{...input}
select
onChange={(event, index, value) => input.onChange(event.target.value)}
children={children}
{...custom}
/>
)
Still, it changes the value, and just after that it returns to 0. If I console.log the form values, it shows up (after manually changing the value):
{ name: "Lily" }
{ name: 0 }
{ name: 0 }
(it happens in period of one second)
Looking forward for any help. Thank you.
Edit: This is what happens in redux dev tools, when choosing an item with string value - in this case pln.

Based on this react-select issue and this redux-form issue it seems like you need to override the default onBlur event.

React-Bootstrap set value of FormControl Select

I have a FormControl which is a Select that I am using in a form. It works fine when adding a new resource, but when I want to edit an existing record I need to set the value of the control. I'm not seeing a good way to set the value of the select / combobox. This is what my JSX looks like.
<FormGroup controlId="group">
<ControlLabel>Group</ControlLabel>
<FormControl componentClass="select" placeholder="Group"
inputRef={ref => { this.groupSelect = ref; }}
onChange={this.groupSelect}>
<option></option>
{
this.state.groups.map(function (group) {
return <option key={group.id} value={group.id}>{group.name}</option>
})
}
</FormControl>
</FormGroup>
I've tried to access the component this way but it comes up undefined.
console.debug(this.groupSelect);
this.groupSelect.value(1);
UPDATE:
I'm trying the following, but this doesn't appear to be working either because I don't have access in the state, calling bind causes an error.
<FormGroup controlId="group">
<ControlLabel>Group</ControlLabel>
<FormControl componentClass="select" placeholder="Group"
inputRef={(ref) => { this.state.groupSelect = ref }}
onChange={this.groupSelect}>
<option></option>
{
this.state.groups.map(function (group) {
return <option key={group.id} value={group.id} selected={this.state.selectedGroupId == group.id}>{group.name}</option>
}).bind(this)
}
</FormControl>
</FormGroup>

You are missing a crucial piece here, which is you need to set the value of the component. Add:
value={this.state.groupSelectValue || defaultValue}
Where groupSelectValue is the value from the record you're editing, and the defaultValue is what you want to default to if there is no record or no value in the record.
Then, in the onChange event function (groupSelect(e)), you will do:
this.setState({
groupSelectValue: e.target.value
});
So that the state is updated with the selection.

The selected value should come from model (state or property), you are trying to achieve what you need with 'jquery way '- which is wrong.