Use this code to reset Select options with external button:

import React, { useState } from "react";
import { MDBBtn, MDBContainer, MDBSelect } from "mdb-react-ui-kit";

const defaultSelectOptions = [
  { text: "One", value: 1, defaultSelected: true },
  { text: "Two", value: 2 },
  { text: "Three", value: 3 },
];

export default function App() {
  const [selectValue, setSelectValue] = useState(defaultSelectOptions);

  const resetForm = () => {
    setSelectValue([...defaultSelectOptions]);
  };

  return (
    <form>
      <MDBContainer className="my-5">
        <MDBSelect className={"my-3"} data={selectValue} value={3} />
        <MDBBtn type="button" onClick={resetForm}>
          Reset form
        </MDBBtn>
      </MDBContainer>
    </form>
  );
}

In this case, select component re-evaluates when data prop is changed. setSelectValue([...defaultSelectOptions]) creates a new array from defaultSelectOptions and it's recognized as a new value, even if the data in the array is exactly the same.

You can't use setSelectValue(defaultSelectOptions) because it doesn't change array-items or array itself, so select won't see the difference and will keep current state.

I no longer need this resolved as I've removed this select feature from the project.

Hi!

For that purpose, you should use the type of reset button or just form.reset() method (i.e. $("#serviceRequestForm").reset()) to achieve that. You can also pass this clearForm function to an onReset callback in the MDBValidation component to update the select data or other form values :)