I have a list that i want to display in a dropdown. The onchange in handled by

const handleChange = (event) => {
    onFilterChange(filterName, event.target.value);
    }
 };

event.target.value is what is pulling the information.

My dropdown list items are listItems = ['greaterthan', 'lesserthan, 'equal'], which are string keys that are fed into event.target.value.

My issue is that i want listItems to be an array of symbols( >, <, =) instead of words. But my components only works with the word keys.

I want to create an if statement in the handler that maps the word value to the signs array.

ex.

const listItems = ['>','<','=']

const handleChange = (event) => {
        onFilterChange(filterName, event.target.value);
        if (event.target.value === '>') {
          // then use key value of greaterthan
        } if (event.target.value === '<') {
          // then use key value of lesserthan
        } if (event.target.value === '=') {
          // then use key value of equal
        }
      }

;

I'm feeding it into a select component by using

<Select>
{listItems.map((listItem) => <MenuItem value={listItem}>{listItem}</MenuItem>)}
</Select>

Thank you for your help.