Retrieve value of selected element in the dropdown - ReactJS

Question

I am a beginner in React and trying to understand binding and events. I have created a learning project and want to validate the dropdown on onChange. If no value is selected from the drop-down, then display an error message.

Note: I'm using a custom library which has attributes for inValid and error with SelectField component. If inValid is set to true, it will trigger an error message.

I've tried finding solutions on multiple sources and trying to resolve this since hours. Please have a look. Thanks in advance.

WeatherOptionsView.js

class WeatherOptionsView extends React.Component {
  constructor(props) {
    super(props);
    this.state = { reasonState: false, selectValue: null };
  }

  validateState(event) {
    if(!! event.target.selectValue ) {
      this.setState({reasonState: true});
    } 
  }

  render() {
    const cx = classNames.bind(styles);

    return (
      <ContentContainer fill>
        <Spacer marginTop="none" marginBottom="large+1" marginLeft="none" marginRight="none" paddingTop="large+2" paddingBottom="none" paddingLeft="large+2" paddingRight="large+2">
          <Fieldset legend="City">
            <Grid>
              <Grid.Row>
                <Grid.Column tiny={3}>
                    <SelectField selectId="city" required placeholder="Select" label={["City:"]} error={["Error message"]} onChange={this.validateState.bind(this)} isInvalid={this.state.reasonState} value={this.state.selectValue}>
                      <Select.Option value="City1" display="City1" />
                      <Select.Option value="City2" display="City2" />
                    </SelectField>
                </Grid.Column>
              </Grid.Row>
             </Grid>
        )}
        />
      </ContentContainer>
    );
  }
}

export default injectIntl(WeatherOptionsView);

Uncaught TypeError: Cannot read property 'selectValue' of undefined

There is nothing called selectValue in event.target. It is event.target.value. — Ananthaprakash
– Ananthaprakash, Commented Jan 31, 2020 at 23:24

Zoran · Accepted Answer · 2020-01-31 22:39:32Z

2

Your problem is not in the binding but in your validateState implementation. You are expecting event, but the SelectField component is probably passing value. The value doesn't have the target attribute that you want. Try something like this, instead:

handleChange(value) {
    this.setState({selectValue: value, reasonState: !value});
}

// and then in the render: 

<SelectField onChange={this.handleChange.bind(this)}>
    {/* ... */}
</SelectField>

answered Jan 31, 2020 at 22:39

Zoran

3493 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

babybear Over a year ago

When I try to print value of selectValue after setting the state, as console.log(this.state.selectValue), it shows null. So It's not setting the state correctly?

babybear Over a year ago

Got the answer. setState is asynchronous, so this.state will still contain the previous values.

Alex L · Accepted Answer · 2020-01-31 22:46:27Z

1

As it says Uncaught TypeError: Cannot read property 'selectValue' of undefined, event.target value is undefined. Also you have to set selectValue in the local state onChange to send value prop for .

javascript react.js

edited Jan 31, 2020 at 22:46

Alex L

4,2711 gold badge11 silver badges30 bronze badges

answered Jan 31, 2020 at 22:33

PK07

613 bronze badges

Collectives™ on Stack Overflow

Retrieve value of selected element in the dropdown - ReactJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related