(REACT) Setting a default value to a Dropdown field – Blancer.com Tutorials and projects

I am making a simple frontend to showcase CRUD RESTful API behavior. One of the requirements is, when the option “GET” is selected, to set as a default at the Dropdown field shown in the picture “Order-by” the value “Name”. However, for all the other options, the value should be default “None”.

This is how the specific part of the frontend looks.

const [selectedOrder, setSelectedOrder] = React.useState('');

const handleOrderChange = (event) => { setSelectedOrder(event.target.value); }

So far, the attribute “selected” doesn’t work because the state of the field changes. Setting the defaultValue to name also doesn’t work.

Order-by: &nbsp;

<select name="order-by" value={selectedOrder} onChange={handleOrderChange}>

    <option value="">None</option>

    <option value="name" disabled={!isOptionDisabled("GET")}>Name</option>

    <option value="iso" disabled={!isOptionDisabled("GET")}>ISO</option>

    <option value="year" disabled={!isOptionDisabled("GET", "GET emission")}>Year</option>

    <option value="population" disabled={!isOptionDisabled("GET energy per capita")}>Population</option>

</select>