Атрибути value во select во 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 во state ќе пристигнуваат токму нивните вредности, a не текстовите на таговите 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.