隐藏已在 select 框中选择的选项 ReactJS

Question

I have 3 select boxes all populated with the same option values. It is for a user to set security questions, so the user selects each question they desire from each select box and answers it. I made an API call to receive the security questions and stored them in an array called "securityQuestions. Now what I want to achieve is that when a user selects a question from any of the dropdown, the question selected is hidden from the rest of the select boxes, to avoid the user answering the same question twice. This is how I am displaying the questions and receiving the user's input

<div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <select 
                    className="form-control"
                    onChange = {onChange}
                    name = "question1Id"
                    required
                  >

                  <option value="">Select first security question</option>
                    
                        { 
                            securityQuestions ?
                            securityQuestions.map((question, i)=>{
                              return  <option
                                    value={question.id}
                                    key={i}
                                >
                                    {question.name}
                                </option>
                            })
                            :
                            null
                        }
                 </select>
                </div>
              </div> 

              <div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <input 
                    type="text" 
                    className="form-control" 
                    required="required"
                    placeholder="Answer 1"
                    name="answer1"
                    onChange={onChange}
                  />
                </div>
              </div> 

              <div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <select 
                    className="form-control"
                    onChange = {onChange}
                    name = "question2Id"
                    required
                  >

                  <option value="">Select second security question</option>
                    
                        { 
                            securityQuestions ?
                            securityQuestions.map((question, i)=>{
                              return  <option
                                    value={question.id}
                                    key={i}
                                >
                                    {question.name}
                                </option>
                            })
                            :
                            null
                        }
                 </select>
                </div>
              </div> 

              <div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <input 
                    type="text" 
                    className="form-control" 
                    required="required"
                    onChange={onChange}
                    placeholder="Answer 2"
                    name="answer2"
                  />
                </div>
              </div>

And this is my onChange function:

    const onChange =(e)=>{
        let name = e.target.name;
        let value = e.target.value;
        setState({
            ...state,
           [ e.target.name]: e.target.value
        })
    }

Please how do I implement it that when an option has been selected from the first select dropdown, it is hidden fron the second select dropdown

Answer 1

One way would be to filter your securityQuestions . Extremely naively:

{ securityQuestions &&
  securityQuestions.map((question, i)=> {
    if (question.id === question1Id || question.id === question2Id) {
      return null;
    }
    return  <option
      value={question.id}
      key={i}
    >
      {question.name}
    </option>
  })
}

Answer 2

filter the questions..

here is a example https://codesandbox.io/s/frosty-water-xsgjc?file=/src/App.js