score:1

i'm not seeing that behavior with the snippet below.

if there are any details missing that would lead to your issue please let me know. but as is, it appears to be working.

const {usestate} = react;

const types = ['name', 'date', 'priority', ''];

const example = () => {
  const [value, setvalue] = usestate('');
  const [filtertype, settype] = usestate('');
  
  const onchange = (e) => setvalue(e.target.value)
  
  const toggletype = () => {
    const lastindex = types.indexof(filtertype) == types.length - 1 ? -1 : types.indexof(filtertype);
    settype(types[lastindex + 1])
  }
   
   return (
    <div>
      <div>
        <button onclick={toggletype}>toggle</button>
      </div>
      { filtertype === 'name' ? (
          <div>name</div>
      ) : filtertype === 'date' ? (
          <div>date</div>
      ) : filtertype === 'priority' ? (
        <react.fragment>
          <select value={value} onchange={onchange} name="priority">
            <option value="" disabled>
              filter...
            </option>
            <option value="low">by low priority</option>
            <option value="norm">by normal priority</option>
            <option value="high">by high priority</option>
          </select>
          <label htmlfor="priority">filtering by priority level</label>
        </react.fragment>
      ) : 
        <div>else</div>
      }
    </div>
   );
}

reactdom.render(<example />, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>


Related Query

More Query from same tag