Estoy agregando un componente al dom basado en el clic del botón.
<button onClick={() => addQuestion("Template 1")}> Template 1 </button> <button onClick={() => addQuestion("Template 2")}> Template 3 </button> <button onClick={() => addQuestion("Template 3")}> Template 3 </button>También tengo una etiqueta de selección con el mismo valor que el botón. Si el usuario desea cambiar el tipo de, el componente de opción cambiará.
<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>Qué está funcionando : si cambio el valor en la etiqueta de selección, se representa el componente esperado.
Lo que no funciona : si presiono un botón, los componentes esperados se procesan pero el orden del menú desplegable no cambia. Necesito el valor del componente representado en la parte superior del menú desplegable.
Si presiono el botón Plantilla 2, necesito en este orden
<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>Lo que consigo :
<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>primero debe eliminar el elemento de la matriz y volver a colocarlo primero. Aquí, tengo datos de lugar en gancho de estado. Sería más fácil de entender.
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;