How to Reset Dropdown Selected Value in React JS
To reset the selected value in a dropdown menu in ReactJS, you need to handle the state of the dropdown value and update it accordingly. Here is an example:
{`
import React, { useState } from 'react';
function Dropdown() {
const [selectedOption, setSelectedOption] = useState('default');
const handleReset = () => {
setSelectedOption('default');
}
return (
);
}
export default Dropdown;
`}
In the example above, we have a functional component called ‘Dropdown’ which has a dropdown menu and a button to reset the selected value. The state variable ‘selectedOption’ is initialized with the default value ‘default’ using the useState hook.
The dropdown menu is rendered using the ‘select’ element. The ‘value’ attribute is set to the ‘selectedOption’ state variable, which ensures that the dropdown displays the correct selected value.
The ‘onChange’ event handler is used to update the ‘selectedOption’ state whenever the user selects a different option from the dropdown. It sets the value of the selected option using ‘e.target.value’.
The ‘handleReset’ function is triggered when the user clicks the ‘Reset’ button. Inside this function, we simply update the ‘selectedOption’ state back to ‘default’, effectively resetting the dropdown’s selected value.
By using this approach, you can easily reset the selected value of a dropdown menu in ReactJS.