JSFiddle - React, Tailwind, and code Playground

HTML

<select id="segments">
  <option selected="selected" value="257ad548-6fee-47c1-afbc">first</option>
  <option value="373273a0-208f-4c3f-905b">second</option>
  <option value="26e96613-1180-4961-b775">third</option>
  <option value="03451a57-8d95-4113-b109">fourth</option>
</select>

JavaScript

const data = {
      first: {
        segment: 'first',
        segment_id: '257ad548-6fee-47c1-afbc',
        placeholder: 'Some text'
      },
      second: {
        segment: 'second',
        segment_id: '373273a0-208f-4c3f-905b',
        placeholder: 'Some random text'
      },
      third: {
        segment: 'third',
        segment_id: '26e96613-1180-4961-b775',
        placeholder: 'Another random text'
      },
      fourth: {
        segment: 'fourth',
        segment_id: '03451a57-8d95-4113-b109',
        placeholder: 'Totally random text'
      },
    };

    let select = document.getElementById('segments');
    let placeholder = select.options[select.selectedIndex].text;
    selectSegment = () => {
      document.getElementById('segments').onchange = function() {
        selectedSegment = this.options[this.selectedIndex].text;
        console.log(data.selectedSegment.placeholder); // Not working - it's undefined
        // I'm looking for this value in the data object: data."selected text".paceholder
      }
    }
    selectSegment();