We Keep Coding

Handling onChange event for MaterialUI drop down element

I'm trying to validate the MaterialUI TextField (Country list) component wrapped with Autocomplete using onChange event and use it to enable the Submit button if the field (the country) is filled in. But I'm facing an issue once I'm not entering the country name by hands but selecting it from the dropdown. It looks like onChange event does not see the change in case of selecting from the drop down. (Sorry for formatting issues)
// countries: [a,b,c,d];
<Autocomplete
options={countries as CountryType[]}
<TextField
onChange={(event)=>{setFormValue({
...formValue,
country: event.target.value
})}}
/>
After this I'm using it on enabling the button:
<Button
disableElevation
disabled={formValue.country===""}
>
Submit
</Button>
Would be very appreciated on some suggestions.

While TextField's onChange method is obviously handling changes of the TextField. It doesn't fire on value selection. You're better off removing TextField's onChange handler and assign onInputChange property of the Autocomplete component that does exactly what you're looking for:
<Autocomplete
id="combo-box-demo"
options={countries}
...
onInputChange={(_, value) => {
setFormValue({
...formValue,
country: value
})
}}
renderInput={(params) => (
<TextField ... /> {/* without onChange handler */}
)}
/>

Clear content in select box when first select option changed - reactJS

I am new to ReactJS. I have used AntJS select in my ReactJS project. I have two select in HTML. When the first select is selected, its relative dropdown will be loaded in the second select.
UI View:
When the user chooses the option in the first select, the second select will load its contents.
It was working great. Now my issue was " When I choose an option in second select, it is there in the second select box. But When I changed the option in the first select, the already chosen option in the second select is still there, but the drop-down content in the second select has changed.
My Issue in UI View:
How to clear the selected content in the second select box when the first select option has changed". I have tried so far. I don't how to make it possible. Help me with some solutions.
Code:
WAAccountNameChange(value){
this.setState({selectedValue:"", waWebsiteList: this.state.waAccountWebsiteList[value] })
}
First Select:
<Select " onChange= {(value) => { this.WAAccountNameChange(value)}} >
{this.state.waAccountList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>
Second Select:
<Select defaultValue={this.state.selectedValue} onChange= {(value) => { this.setState({ selectedValue: value })} } >
{this.state.waWebsiteList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

On the change of first select menu clear the value of second select box. If you retrieve data from API than clear state on API success.

Is there a way to call method when first item is picked in React Native Picker?

EDIT
functionToRedirect(itemValue) is a function that gets called when an item in the picker is selected and it redirects to a new screen prepopulating some values in the screen based on 'itemValue'.
However, functionToRedirect(itemValue) is not being called when the same value is selected which I assume is because the value didn't change and thus onValueChange() will not be fired.
Is there a way for me to call the functionToRedirect(itemValue) even when the value didn't change(i.e when the initial value is selected) to try and redirect to the new screen?
<Picker
style={styles.picker}
itemStyle={styles.pickerItem}
mode={"dialog"}
selectedValue={this.props.value}
onValueChange={(itemValue) => {
functionToRedirect(itemValue);
}
}>
{this.state.pickerItems}
</Picker>

How about using a custom picker? Nativebase, a custom implementation of ReactNative UI components can give you a customised flavour of the components.
They have implemented Picker using RN Picker as a wrapper around flatlist of items opened in a modal window through which you can select items accordingly.

The solution I came to was to pass selectedValue null such that the first displayed option in the dropdown is the dropdown title.
The solution looks like below
<Picker
style={styles.picker}
itemStyle={styles.pickerItem}
mode={"dialog"}
selectedValue={null}
onValueChange={(itemValue) => {
this.props.onChange(itemValue)
}}
>
{this.state.pickerItems}
</Picker>
which shows the picker title as the initial value of the dropdown as shown below

how to set default value in select using react js

I have two dropdown in my example with reset state (select bank select state).only first dropdown have data .When I changed first dropdown value then i fetch state data and show in dropdown . if i select YES BANK it show me select state .Now if I select any state example Delhi.then do something.But Now If I change again bank instead of yes bank example Axis bank state dropdown show Delhi why ? it show be reset and show select state ?
how to reset second dropdown (when first dropdown is change).here is my code
https://codesandbox.io/s/7wlwx2volq
Second dropdown always show select state with new data of bank,when user change bank name
onChangeDropdown = e => {
console.log(e.target.value);
this.props.callbackFn(e.target.value);
};
please explain

One possible solution is: Instead of using the selected property on options, use controlled component means use the value property of select field. Whenever any change happen to bank list, reset the value of state select filed value. Also define the value='' with default option.
Like this:
<select value={this.props.value} onChange={this.onChangeDropdown}>
<option value='' disabled>
{this.props.defaultOption}
</option>
{makeDropDown()}
</select>;
Pass value from parent component, like this:
<DropDown
value={this.state.bankName}
data={this.state.bankData}
defaultOption="select Bank"
callbackFn={this.callStateService}
/>
<DropDown
value={this.state.stateName}
data={this.state.stateData}
defaultOption="select State"
callbackFn={this.callDistrictService}
/>
Define onChange function for state select field change:
callDistrictService = value => {
this.setState({ stateName: value });
}
Working Sandbox.

Chip inside select field in material ui and react

i'm having a little issue here and i need your help.
I want to render a select field with chip inside of it. I successfully implement this but i'm having a little issue. When i click in one of my chip inside the dropdown the dropdown text is showing nothing. I add the propery primaryText inside the menu item and the value is shown successfully but not with the way i wish. Here is a screenshot:
And here is my code:
<MenuItem
key={id}
value={id}
style={styles.scroll}
primaryText={id}
>
<Chip
key={id}
style={styles.chip}
onClick={() => customerSessionSelector(id)}
onRequestDelete={() => handleRequestDelete(id)}
>
{id}
</Chip>
</MenuItem>
For not showing the text under the chip i remove the primaryText property but when i select the value the value is now showing? Any ideas of how to achieve something like this?