在用户选择一个选项并在 ReactJS 中按下提交后，重新渲染 select 选项

Question

I am new to React. I am trying to understand how to use hooks and states but I am having some trouble. I am displaying some options in the select tag and after the user selects one option and clicks on submit I want to remove that option from the list of options without having the user to refresh.

<form onSubmit={handleSubmit} className="row valign-wrapper">
        <div className="input-field col s12 l6">

          <select className="browser-default" onChange={(e) => setSelected(e.target.value)} value={selected}>
            <option value="None">Select</option>
            { institutions.map(institution => (
              <option key={institution._id} value={institution._id}>{institution.name}</option>
            ))}
          </select>
        </div>
        <div className="col s12 l6">
         <button className="btn waves-effect waves-light indigo" type="submit">Apply</button>
        </div>
      </form>

Answer 1

Just add this to your form onSubmit={(e)=>e.preventDefault()}