How to listen for changes in react semantic dropdown element?

Question

From parent component I pass to the child-comp handleOnChange fucntion which should listen for changed in Dropdown(from React-SemanticUI).

But somewhere I made mistake. I get undefined value onChange event listener.

Parent comp:

   class AwwWrapper extends Component {
          state = {
            injuredWorkerType: '',
            totalDays: '',
          }

          onChangeInjuredWorkerType = event => {
            this.setState({ injuredWorkerType: event.target.value })
          }

          render() {
            return (
              <Segment
                raised
                style={{
                  backgroundColor: '#F0F0F0',
                }}
              >
              // HERE IS CHILD COMPONENT IN WHICH I PASS EVENT HANDLER  
                <InjuredWorkerPayFields2
                  {...this.props}
                  onChangeInjuredWorkerType={this.onChangeInjuredWorkerType}
                  injuredWorkerType={this.state.injuredWorkerType}
                />
              </Segment>
            )
          }
        }

        export default AwwWrapper

CHILD COMPONENT:

  return (
    <Form.Group widths={'equal'} style={{ marginTop: '2rem' }}>
      <Form.Field required width={5}>
        <label style={{ fontSize: '0.85rem' }}>2a. Injured worker type:</label>
        <Dropdown
          onChange={props.onChangeInjuredWorkerType}
          selection
          name={'injured_worker_type'}
          placeholder={'Worker Type'}
          options={workerTypeOptions}
          value={props.injuredWorkerType}
        />
      </Form.Field>   
    </Form.Group>
  )
}

export default InjuredWorkerPayFields2

Why I get here value undefined??

 `  
 onChangeInjuredWorkerType = event => {
 this.setState({ injuredWorkerType: event.target.value })
}
 `

Hemadri Dasari · Accepted Answer · 2018-10-04 12:47:57Z

1

Because you are assigning props.injuredWorkerType as value to DropDown here value={props.injuredWorkerType}. So the props.injuredWorkerType will be undefined. You seems not benefited having onChangeInjuredWorkerType in Parent component. So I would recommend you to declare handler function in child component and manage the state there itself instead of going with callback.

Or if you want that be like as it is then try below solution

 <Dropdown
      onChange={props.onChangeInjuredWorkerType}
      selection
      name={'injured_worker_type'}
      placeholder={'Worker Type'}
      options={workerTypeOptions}
      value={props.injuredWorkerType ? props.injuredWorkerType : ""}
    />

answered Oct 4, 2018 at 12:47

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

How to listen for changes in react semantic dropdown element?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related