CODEWITHSUNDEEP
javascriptreactjs
James Delaney
James Delaney

Reputation: 1776

How to listen for changes in react semantic dropdown element?

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 })
}
 `

Upvotes: 1

Views: 120

Answers (1)

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

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 : ""}
    />

Upvotes: 1

Related Questions