how to change modal based on select option value in reactjs-CodePudding

I want to show 2nd modal based on select option value: Here is my code:

<button onClick={addContribute}>
      Contribute
</button>
<Modal 
     show={contribute} 
     onHide={closeContribute}
     centered>
   <Modal.Body>
      <div className="mb-3">
          <label for="whatToAdd" >What to add</label>
          <select className="form-select lm-border" id="whatToAdd" aria-label="Default select example">
             <option>Select</option>
             <option value="journalArticle">Journal Article</option>
             <option value="books">Books</option>
             <option value="caseLaw">Case Law</option>
             <option value="insights">Insights</option>
         </select>
      </div>
      </Modal.Body>
      <Modal.Footer>
        <button className="btn-next" onClick={addContributeBook}>
           Next
        </button>
      </Modal.Footer>
 </Modal>
<Modal 
     show={contributeBook} 
     onHide={closeContributeBook}
     centered>
   <Modal.Body>
      <div className="mb-3">
          This is book
      </div>
      </Modal.Body>
      <Modal.Footer>
        <button className="btn-next" onClick={closeContributeBook}>
           Submit
        </button>
      </Modal.Footer>
 </Modal>
<Modal 
     show={contributeInsight} 
     onHide={closeContributeInsight}
     centered>
   <Modal.Body>
      <div className="mb-3">
          This is insights
      </div>
      </Modal.Body>
      <Modal.Footer>
        <button className="btn-next" onClick={closeContributeInsight}>
           Submit
        </button>
      </Modal.Footer>
 </Modal>

Here is my state: Currently I hide the first modal and show the second on not based any value so i wants 2nd modal based on my first modal values.

const [contribute, setContribute] = useState(false);

const [contributeBook, setContributeBook] = useState(false);

const closeContribute = () => setContribute(false);
const addContribute = () => setContribute(true);

const closeConBook = () => setContributeBook(false);

const addContributeBook = (e, stateSub = true, stateMain = false) => {
    setContribute(stateMain);
    setContributeBook(stateSub);
  };

If i select Books on first modal then show BooksModal if I select Insights then show insights modal. How to get the value then show the modal individually?

CodePudding user response：

It would help if you stored the value taken from the first modal to show a modal based on input from the first modal.

 const [selection, setSelection] = useState("");

Then and onChange in select tag as follows:

<select
      className="form-select lm-border"
      id="whatToAdd"
      aria-label="Default select example"
      onChange={(e) => {
        setSelection(e.target.value);
      }}
    >

Now based on this value you can decide which modal you want to show. You can update you onClick for next to as follows:

const onNext = () =>{
setContribute(false);
switch(selection){
  case 'books':setContributeBook(true);break;
  case 'insights':setContributeInsight(true);break;
  default: break;
    
}
}