I have a list and I choose a value from the list.

For example "Mercedes".

But I close this list with the "Save" or "Close" button and when I open it again, "Mercedes" is selected. How can I prevent this?

    <Modal isOpen={app.showCars} >
        <ModalHeader>
        </ModalHeader>

        <ModalBody>
            <Select
                options={carList}
                onChange={(car) => (app.addcar = car)}
                value={app.addcar }
            />
        </ModalBody>

        <ModalFooter>
            <Button onClick={() => {
                app.addcar()
                app.showCarModal = false;
            }}>Save</Button>

            <Button onClick={() => {
                app.showCarModal = false;
            }}> Close </Button>
        </ModalFooter>
    </Modal>

CodePudding user response：

(I borrowed this code from one of my other answers because it was easier to change that than try to work out what UI library you're using. You can ignore most of it - the important part is in the Example component at the bottom.)

Going back to my comment:

Maintain the state of the last selected option, and then use that state to declare the default selected option when the select is rendered again.

The parent component (Example) should manage the state of both the modal (open or closed), and the current selection. So we initialise a new state called selected that can be updated using the corresponding setSelected function.

We pass that state, and a handler down to the Select component. We use the selected property to set the default option on the select (I imagine your UI library Select component allows this too), and call the handleChange handler whenever a new option is chosen. The handler updates the state so whenever the modal opens again that option will be pre-selected.

const { useState } = React;

// Create the modal component which accepts two handlers,
// and "children" which is the HTML you want to show
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return ReactDOM.createPortal(    
    <div className="modal">
      {children}
      <button
        className="closemodal"
        onClick={onClose}
      >Close
      </button>
    </div>,
    document.body
  );
}

// Pass in the handler to the Nav component
function Nav({ handleModal }) {
  return (
    <nav>
      <a onClick={handleModal}>Open modal</a>
    </nav>
  );
}

// ContactUs builds the form within the modal
// We pass in the showModal state, and the handler
function Select(props) {
  
  const {
    selected,
    handleSelected
  } = props;
    
  return (
    <select defaultValue={selected} onChange={handleSelected}>
      <option selected disabled value="default">Select something</option>
      <option value="bob">Bob</option>
      <option value="sara">Sara</option>
      <option value="kevin">Kevin</option>
      <option value="teresa">Teresa</option>
    </select>
  );
}

function Example() {

  const [ selected, setSelected ] = useState('default');
  const [ showModal, setShowModal ] = useState(false);

  // Our main handler for the modal. It simply
  // toggles between true and false
  function handleModal() {
    setShowModal(!showModal);
  }

  // Sets a new state with the selected option value
  function handleSelected(e) {
    setSelected(e.target.selectedOptions[0].value);
  }

  return (
    <div>
      <Nav handleModal={handleModal} />
      <Modal isOpen={showModal} onClose={handleModal}>
        <Select
          selected={selected}
          handleSelected={handleSelected}
        />
      </Modal>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

nav { padding: 1em; margin: 0.2em; background-color: #efefef; }
nav a { border: 2px solid #454545; padding: 0.25em; }
nav a:hover { cursor: pointer; background-color: #dfdfdf; }
.modal { position: fixed; inset: 0; background-color: white; margin: 0.5em; border: 2px solid #343434; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; overflow-y:scroll; transition: all 0.3s ease-in-out; z-index: 999; }
fieldset { margin-bottom: 1em; background-color: #efefef; }
.closemodal { padding: 0.5em; background-color: #336699; color: white; }
.send { background-color: #44aa77; color: white; }
.closemodal:hover, .send:hover { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>