score:0
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;
Source: stackoverflow.com
Related Query
- change the order of dropdown on its event change
- Jest: onChange event on a Dropdown does not change its value
- "React has detected a change in the order of Hooks" but Hooks seem to be invoked in order
- How do I change the dropdown icon in material-ui select field?
- How do I trigger the change event on a react-select component with react-testing-library?
- ReactJS - trigger event even if the same option is selected from select dropdown
- How can I handle the change event with React-Hook-Form?
- In what way can each <li> in a <ul> change its classname without affecting the others?
- Is it acceptable for a reducer to mutate its action object in order to communicate partial handling of the action?
- React has detected a change in the order of Hooks called, but I can't see any hooks being called conditonally
- How do I change the order of the Gradient in Format Column with AG Grid and AdapTable
- How do I change the position of dropdown icon (arrow) in material-ui select?
- Change the value of object in an array on click event
- How to ignore the websocket event for the client who made a change via HTTP?
- Change the element wrapping its children based on a condition in JSX
- ReactJS 7 - How to conditionally change the background color of table cell only (not the row) based on its value?
- What are the guarantees on React lifecycle event order between components?
- JavaScript return tab order to top of the page after blur event
- How to change the dropdown hover color react Material-UI Select
- What is the most intelligent way to close the Dropdown Menu on clicking outside of its scope?
- I have many checkbox it render as the description below I want to change the nested value its in blue circle in the pic
- How to change useState's state without re-rendering the component, but just its components
- Event propagation and multiple state change in react select dropdown
- How to change the filter method of a higher order component in React?
- How do I attach multiple event listeners to the same event of a child component from its parent component in React?
- Have React component trigger a change event the way DOM components would
- What to set as the Provider's value in order to change context from a Consumer, in Typescript?
- React with TypeScript - React has detected a change in the order of Hooks called by ComponentName
- Right click menu triggering the click event of its parent menu-item
- Why onClick event doesn't change the props.title in React
More Query from same tag
- delete data in firebase using React application
- Getting url parameter from react to node
- Unwanted content is showing while closing modal
- How give information to a single page product
- How does dispatching a action creator function work?
- How to use custom props and theme with material-ui styled components API (Typescript)?
- Test Functions Passed as Props to Component
- React passing down a function that modifies a third component
- how to make path for / and home in react router v6?
- Change Color of Text Field from Text Field in Material UI v5
- NextJs 'npm build' and 'npm start' messes up styles
- React does not render (in the first go) with respect to an array defines within the function or even passed as props
- React passing data from child -> parent -> another child
- react doesn't get re-render after getting new store state into props
- How to chain promise in redux action
- React Native and JSON file parsing
- how to properly handle firebase realtime database listeners with useEffect?
- React lazy load/infinite scroll solutions
- Logical error in React useEffect and conditional statement
- react bootstrap offcanvas custom close button
- Redux store is filled with a bunch of strange properties
- Why HTML SVG hexagon onClick "hitbox" being rectangular?
- Override eslint settings in non-ejected create-react-app?
- How to keep components pure when defining functions in smart containers?
- Incorrect casing error with dynamically rendered component in React
- ReactJS property timerID does not exist on type Clock
- Page-layout -> getPrintArea() in office-JS is returning blank Object
- What is the difference in layout positioning of react-vr and react-360?
- Changing the notification field "seen" boolean in firebase to true via a transaction operation
- ReactJs: TypeError: Cannot read property 'length' of undefined