We Keep Coding

Bind the Selected option text To Input box

Im new to react, Im acheiving to search the text,which will post to the api, and the results will be displayed as options in box,for which im using twitter bootstrap just the className's to match with REACT.I want to make the make the option's value to be bind to the input text box above, if i select the option. How to achieve this using useRef and at the same time ,the select box should close if the option is selected.The HandleCHange for the input box triggers the api call for every keystrole
Below is the code for the select box.
<input
className='form-control'
placeholder='Search Drug...'
onChange={handleChange}
/>
<select class='custom-select' size={drugList.drugs?.length> 0 ? '10' : ''} onChange={handleSelectChange}>
{drugList.drugs?.length > 0 &&
drugList.drugs.map((each,index) => {
return (
<option key={index} value={`${each.drug}`}>
{each.drug}
</option>
)
})}
</select>
Here i want the selected value to be bind to the input box.It will be great if you give the sample code or snippet.
Please refer the image above.Thanks in Advance!

I want to make the make the option's value to be bind to the input text box above
---> use component state to store the selected value from the options dropdown
at the same time ,the select box should close if the option is selected.
----> hide/display select options based on input box focus by toggling component state.
created a sandbox for your app, please check

I think you can do this like this.
handleSelectChange = (event) =>{
this.setState({selectvalue:event.target.value});
}
handleChange= (event) =>{
this.setState({selectvalue:event.target.value});
---- and your code here---
}
<input
className='form-control'
placeholder='Search Drug...'
onChange={this.handleChange}
value={this.state.selectvalue}
/>
<select class='custom-select' size={drugList.drugs?.length> 0 ? '10' : ''} onChange={this.handleSelectChange}>
{drugList.drugs?.length > 0 &&
drugList.drugs.map((each,index) => {
return (
<option key={index} value={`${each.drug}`}>
{each.drug}
</option>
)
})}
</select>

Transform a Select into NativeSelect with MaterialUI

There is a Select and I want to change it to NativeSelect, the problem is that it doesn't do anything when it's clicked.
The dropdown doesn't show the values. I've read that on NativeSelect the value is casted to string. The values in my dropdown are already string.
How can this be solved?
The following is my code working. If Select is replaced by NativeSelect it doesn't work anymore.
<FormControl className='searchBrand'>
<InputLabel id='brandLabel'>Brand</InputLabel>
<Select
labelId='brandLabel'
id='brandLabel'
renderValue={this.getSelectedBrandFilter}
value={this.props.brandFilter}
onChange={this.handleChangeBrand}
multiple
>
{this.props.platformFilter.length > 0
? brands.map((brand) => (
<MenuItem key={brand} value={brand}>
<div>{brand}</div>
</MenuItem>
))
: ''}
</Select>
</FormControl>

How to get an input field when the user selects "Other" in a dropdown

I'm making a form and I want the user to see an input field when they select "Others" in the dropdown.
I'm fairly new to React and was trying to get the value itself from the input field, but it's not working.
<FormItem>
<h4 className={ 'register_form_title'}><span className={ "red_astrick_sign"}>*</span>Entity type</h4>
<Select placeholder="Type of entity" onChange={value=> setFieldValue('organisation_type', Number(value))} name="organisation_attributes.organisation_type">
<Option value="1">Public Limited Company</Option>
<Option value="2">Private Limited Company</Option>
<Option value="3">One Person Company</Option>
<Option value="4">Limited Liability Partnership</Option>
<Option value="5">Partnership Firm</Option>
<Option value="6">Sole Proprietorship</Option>
<Option value="0">Others</Option>
</Select>
</FormItem>
This is a simple dropdown which converts the chosen value to a number, so the output of the code will be {"organisation_type":<value>}. But if they select "Others", the input field should determine the <value>.

Use state to store the current value of the drop-down and visibility of input-field.
Inside the onChange handler, only set current value with the transformation when the value is not O(for Others) and set input-visibility to false. But, when it is 0, set input-visibility to true.
Inside the onChange of input field, set current value as would do.

Use a state variable to track visibility of input field.
constructor(props) {
super(props);
this.state = {show_input_field: false}
}
In your onChange attribute, check if the value is 0, setState of show_input_field to true, else false, hence showing/hiding the input field.
Using the same name attribute lets you save value in the desired 'organisation_attributes.organisation_type': <value> pair.
render() {
const {show_input_field} = this.state;
...
<Select placeholder="Type of entity" onChange={value => {
setFieldValue('organisation_attributes.organisation_type', Number(value));
if (value === 0)
this.setState({show_input_field: true});
else
this.setState({show_input_field: false});
}} name="organisation_attributes.organisation_type">
</Select>
{show_input_field ? <Input name="organisation_attributes.organisation_type" onChange={handleChange}/> : ""}
...
}
Hope this helps.

How to Implement Multi Select Dropdown in React

I'm looking for a good way to create multi select dropdowns in plain React, without using an additional library.
At present, I’m doing something like this:
<select className='yearlymeeting' multiple={true}>
<option value=''>Yearly Meeting</option>
{
this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
return (
<option
value={m.title}
key={i}
selected={this.state.selectedTitles.yearlyMeetingTitles.includes(m.title) ? true : false}>
{m.title}
</option>
);
})
}
</select>
This code "works", but I'm getting this warning:
Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

From react docs -
You can pass an array into the value attribute, allowing you to select multiple options in a select tag:
<select multiple={true} value={['B', 'C']}>
I think you just need to pass your selected items array to value prop of select element.

Instead of checking conditions and setting "selected" props in the "option" element, directly set the value in the "select" element. The warning should go away.
<select className='yearlymeeting' multiple={true}
value={this.state.selectedTitles.yearlyMeetingTitles}>
<option value=''>Yearly Meeting</option>
{
this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
return (
<option
value={m.title}
key={i}
{m.title}
</option>
);
})
}
</select>

Show/hide field based on the value of another field using redux-form

I have a Field which I want to hide based on the value of another Field. For this I am right now using the warn props as I can get the current value as well as the values of other fields in the form.
Is it possible to create custom props ( similar to warn and validate) that can take the current field's value and all the values of the form as arguments?
What are other approaches I can do to hide/show a field based on value of another field using redux-form?

You can use Fields component for this. It handles the state of various fields under a single component.
Example:
// outside your render() method
const renderFields = (fields) => (
<div>
<div className="input-row">
<label>Category:</label>
<select {...fields.category.input}>
<option value="foo">Some option</option>
</select>
</div>
{ fields.category.input.value && (
<div className="input-row">
<label>Sub category</label>
<select {...fields.subcategory.input}>
<option value="foo">Some other option</option>
</select>
</div>
)}
</div>
)
// inside your render() method
<Fields names={[ 'category', 'subcategory' ]} component={renderFields}/>