Атрибути value у селекту у React-у

Нека сада у таговима option постоје атрибути value:

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

У таквом случају због присуства атрибута value у стејт ће упадати њихове вредности, а не текстови тагова option. Може се уверити у ово, исписавши резултат избора у пасус:

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}
    </p>
  </div>;
}

Раздвојити текст option и његову вредност може бити згодно: текст тага можемо мењати како нам је воља, при томе у нашем скрипту резултат избора ће се обрађивати по вредности атрибута value, који ће остати непромењен.

Погледајте пример:

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' && 'изабрали сте прву ставку'}
      {value === '2' && 'изабрали сте другу ставку'}
      {value === '3' && 'изабрали сте трећу ставку'}
    </p>
  </div>;
}

Сада, ако изменимо текстове тагова option, рад скрипта се неће пореметити - јер је он везан за вредност атрибута value.