Атрыбуты 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.