Atribúty value v selecte v React

Nech teraz v našich tagoch option sú atribúty value:

jsxfunction App() {
  return <div>
    <select>
      <option value="1">text1</option>
      <option value="2">text2</option>
      <option value="3">text3</option>
    </select>
  </div>;
}

V takom prípade, kvôli prítomnosti atribútov value, do stavu sa dostanú práve ich hodnoty, a nie texty tagov option. Môžeme sa o tom presvedčiť výpisom výberu do odseku:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={(event) => setValue(event.target.value)}>
      <option value="1">text1</option>
      <option value="2">text2</option>
      <option value="3">text3</option>
    </select>
    <p>
      váš výber: {value}
    </p>
  </div>;
}

Oddeliť text option a jeho hodnotu môže byť pohodlné: text tagu môžeme meniť ako chceme, pričom v našom skripte sa výsledok výberu bude spracovávať podľa hodnoty atribútu value, ktorá zostane nezmenená.

Pozrite si príklad:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <select value={value} onChange={event => setValue(event.target.value)}>
      <option value="1">text1</option>
      <option value="2">text2</option>
      <option value="3">text3</option>
    </select>
    <p>
      {value === '1' && 'vybrali ste prvú možnosť'}
      {value === '2' && 'vybrali ste druhú možnosť'}
      {value === '3' && 'vybrali ste tretiu možnosť'}
    </p>
  </div>;
}

Teraz, ak zmeníme texty tagov option, fungovanie skriptu sa nenarúša - pretože je naviazané na hodnotu atribútu value.