TextField in Material UI won't display label after selection

Question

TextField of Material UI won't display the label after I select. However the state and value is updated correctly. I have already put {option.label}but it won't display. Anyone can help? This is my text field.

<TextField
        id="standard-select-currency"
        select
        fullWidth
        label="Filter By"
        defaultValue= "lala"
        InputLabelProps={{
            shrink: true,
            style: { color: '#fff' }
        }}
        margin="normal"
        value={props.filter}
        onChange={props.handleChange('filter')}
      >
        {currencies.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>

This is my currency

const currencies = [
  {
    value: 'USD',
    label: 'usd',
  },
  {
    value: 'EUR',
    label: 'eur',
  },
  {
    value: 'BTC',
    label: 'btc',
  },
  {
    value: 'JPY',
    label: 'jpy',
  },
];

The drop downlist is worked correctly and the state of react is updated.

But the label won't display after the selection

This is the codesandbox I created for this case.

Answer 1

You are specifying value={props.filter} on your TextField, but you aren't specifying a filter prop to MyMapComponent.

If you change:

  render() {
    //console.log("render::::::::::::::::::::");
    return (
      <MyMapComponent
        handleChange={this.handleChange}
      />
    );
  }

to add filter={this.state.filter} as follows:

  render() {
    //console.log("render::::::::::::::::::::");
    return (
      <MyMapComponent
        filter={this.state.filter}
        handleChange={this.handleChange}
      />
    );
  }

then it works.