change the order of dropdown on its event change

Question

I am adding a component to the dom based on the button click.

<button onClick={() => addQuestion("Template 1")}> Template 1 </button>
<button onClick={() => addQuestion("Template 2")}> Template 3 </button>
<button onClick={() => addQuestion("Template 3")}> Template 3 </button>

Also I have a select tag with the same value as button. If the user wish to change the type of, the option component will change.

<select id="q-type" onChange={(e)=>ChangeQType(e)}>
    <option value="Template 1">Template 1</option>
    <option value="Template 2">Template 2</option>
    <option value="Template 3">Template 3</option>
</select>

What is working : If I change the value in select tag the expected component renders.

What is not working : If I press a button , the expected components renders but the order of the dropdown is not changing. I need the rendered component value on top of the dropdown.

If I press Template 2 button I need in this order

<select id="q-type" onChange={(e)=>ChangeQType(e)}>
    <option value="Template 2">Template 2</option>
    <option value="Template 1">Template 1</option>
    <option value="Template 3">Template 3</option>
</select>

What i get :

<select id="q-type" onChange={(e)=>ChangeQType(e)}>
    <option value="Template 1">Template 1</option>
    <option value="Template 2">Template 2</option>
    <option value="Template 3">Template 3</option>
</select>

Answer 1

you need to first remove item from array and again place it in first. Here, I have place data on state hook. It would be easier to understand.

import React, { useState } from 'react';

function App() {
  const [templates, setTemplates] = useState(['Template 1', 'Template 2', 'Template 3']);
  const addQuestion = (item) => {
    let clone = [...templates];
    let objIndex = clone.indexOf(item);
    clone.splice(objIndex, 1);
    setTemplates([item, ...clone]);
  }
  const ChangeQType = () => {

  }
  return (
    <div className="App">
      <button onClick={() => addQuestion("Template 1")}> Template 1 </button>
      <button onClick={() => addQuestion("Template 2")}> Template 2 </button>
      <button onClick={() => addQuestion("Template 3")}> Template 3 </button>
     
      <hr />
      <select id="q-type" onChange={(e) => ChangeQType(e)}>
        {templates.map((item) => <option value={item}>{item}</option>)}
      </select>
    </div>
  );
}

export default App;