how to change modal based on select option value in reactjs

July 25, 2022

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" class="form-label">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?

>Solution :

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;
    
}
}