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>
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;