onChange of Drop down semantic-ui not working

Question

I am working on a react app where I have a dropdown with 3-4 values but when I try to change it,I am only able to access the value part of the options not the text parts.

Here's my form component:

<Form.Select
              name='acknowledgementStatus'
              value={this.props.acknowledgementStatusName} //"" initially 
              onChange={this.handleAcknowledgmentStatusChange}
              label='Acknowledgement Status'
              options={[
                {
                  text: 'ACCEPTED',
                  value: 'AA',
                },
                {
                  text: 'REJECTED',
                  value: 'AR',
                },
              ]}
              selectOnBlur={false}
              selectOnNavigation={false}
              icon={
                <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
            />

Its options has 2 parts,text and value.The text is whats visible in the dropdown but the value is the id I assign to fetch data from API.

But the text part is not able to change. Here's the onChange function:

handleAcknowledgmentStatusChange = (e, data) => {
    console.log(data.value);
    console.log(data.text);
    this.props.setAcknowledgeStatus(data.value, data.text);
  };

The console.log of above change functions prints this:

AR
undefined

Answer 1

Assuming your value are unique, you can get the value of text from data.options:

const { text } = data.options.find(option => option.value === data.value);

Hopefully that helps!