Tips for closing 2 models in a React application

Currently, I am working on a project using ReactJs. One of the functionalities I am implementing is generating a user's gallery when the user clicks on their avatar. To achieve this, I am utilizing the react-grid-gallery package along with semantic ui react for designing purposes. The code snippet for this functionality is as follows:

<Modal trigger={<Image
        src={data.profile_photo}
        alt={data.name}
        size="massive"
        avatar

      />}
      style={ { height: "90%" } }>

        <Modal.Content >

          <Modal.Description>

          <Gallery images={Images} enableImageSelection='false'  isOpen={true} showLightboxThumbnails='true' rowHeight='120'/>
          </Modal.Description>
        </Modal.Content>
      </Modal>

In this code snippet, the array Images contains the images that have already been generated and it works correctly to display a slider. However, my issue arises when closing the Gallery Modal. Even after closing the Gallery Modal, the semantic modal remains open. I want both modals to close simultaneously when closing the Gallery Modal. I tried to manage this by setting a modelopen state but unfortunately, it did not work as expected.

javascriptreactjs

Answer №1

To switch the modal's open state, you can utilize the lightboxWillClose function. Here is an example implementation:

state = { modalOpen: false }

handleModalClose = () => this.setState({ modalOpen = false })

handleModalOpen = () => this.setState({ modalOpen = true })

<Modal 
      open = {this.state.modalOpen}
      trigger={<Image
           onClick = {this.handleModalOpen}
           src={data.profile_photo}
           alt={data.name}
           size="massive"
           avatar 
          />}
      style={ { height: "90%" } }>

  <Modal.Content >
      <Modal.Description>
         <Gallery 
            images={Images} 
            enableImageSelection='false'  
            isOpen={true} 
            showLightboxThumbnails='true' 
            rowHeight='120'
            lightboxWillClose={this.handleModalClose}
           />
      </Modal.Description>
  </Modal.Content>
</Modal>

This code snippet hasn't been tested yet, so some adjustments may be necessary. Nonetheless, it demonstrates the concept.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alternative Options for Playing Audio in Internet Explorer 8

I'm in the process of setting up a button that can both play and pause audio with a simple click. While this functionality is working smoothly in modern browsers like Google Chrome, I am facing compatibility issues with IE 8. Even after attempting to ...

javascriptjqueryhtmlaudiointernet-explorer-8

A guide on reading an external JSON file using React

I'm trying to integrate an external JSON file into my React app. To demonstrate what I'm aiming for, I've provided a functional example on Codesandbox.io: https://codesandbox.io/s/morning-tdd-we2v3?file=/src/App.js Currently, the example ...

javascriptjsonreactjsaxios

How can I prevent clearQueue() from removing future queues?

In my code, I have a button that triggers the showing of a div in 500ms when clicked. After the div is shown, a shake class is added to it after another 500ms. The shake class is then removed after 2 seconds using the delay function. However, if the user c ...

javascriptjqueryhtmlcssqueue

What is causing the delay in retrieving elements using getX() method in Selenium?

Recently, I've been experimenting with web scraping using Selenium. However, I've noticed that there is a delay when calling getText(), getAttribute(), or getTagName() on the WebElements stored in an ArrayList from the website. The website I&apo ...

javascriptjavaseleniumweb-scraping

When attempting to pre-render a Next.js page using getStaticProps(), an error occurs stating that the image is missing the required "src" attribute when using next/image

After reading the documentation for nextjs, I learned that the getStaticProps function should pre-render data that I need before a user visits my site. My goal is to fetch images and load them onto cards. In my index.js file: export async function getSta ...

javascriptreactjsnext.js

What is the best way to ensure TypeScript recognizes a variable as a specific type throughout the code?

Due to compatibility issues with Internet Explorer, I find myself needing to create a custom Error that must be validated using the constructor. customError instanceof CustomError; // false customError.constructor === CustomError; // true But how can I m ...

javascripttypescriptecmascript-5custom-errors

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

In the past, my angular app used a table with orderBy to sort rows based on a specific column. By clicking on a table header, the orderBy arguments would change and the list would be sorted according to the values in that column. Now, I am experimenting w ...

javascriptjqueryhtmlangularjsjquery-ui

What are the reasons behind the lack of smooth functionality in the Bootstrap 4 slider?

My customized bootstrap4 slider is functional, but lacks smoothness when clicking on the "next" and "prev" buttons. The slider transitions suddenly instead of smoothly. Any suggestions on how to fix this? Here is the code for the slider: $('.carous ...

javascripthtmljquerycssbootstrap-4

How to access data from a child component in a Vue 3 template

Within my project, there are three Vue components that utilize the Composite API with the setup option. My goal is to access data within a nested tree structure. The code below provides a simplified version of what I am trying to achieve. The application ...

javascriptvue.jsvuejs3vue-composition-api

When using jQuery's ajax() function, it is possible to pass HTML as data and change the ampersands in URLs to &amp;

I have encountered an issue where I am capturing the HTML content of a page and attempting to send it as a string to a PHP web service using jQuery's ajax() function. However, when I receive the parameter on the PHP side, the &s in the URLs present wi ...

javascriptphpjqueryajax

A step-by-step guide to incorporating expandable and collapsible images within a div element using X

I have successfully created dynamic divs with some data that expand and collapse perfectly. Now I am looking to add expand and collapse images on these divs. I am relatively new to designing in xslt. <xsl:template match="category[key!='org.model.C ...

javascriptjqueryhtmlcssxslt

Why does the incorrect element get updated specifically when files are being uploaded?

I have created a component called CreatePost, which is responsible for creating or editing posts. However, I encountered an issue where if I render this component twice and upload a file from the second instance, it also reflects in the first one. This has ...

reactjsnext.js

Issue with Material-ui IconButton's edge properties not functioning as expected

Is there a way to position the delete icon on the right side of the screen? It seems like using edge= "end" is not working as expected. If you'd like to take a look, here is the sandbox link: https://codesandbox.io/s/admiring-silence-vwfoe? ...

javascriptreactjsmaterial-ui

Validating group radio buttons that have been checked

I possess: <div class="group"> <input type="radio" name="myradio" value="1">a <input type="radio" name="myradio" value="2">b </div> <div class="group"> <input type="radio" name="two" value="3">a <input ty ...

javascriptjqueryhtml

Passing the contents of a datatable as parameters to a PHP script

I am facing a challenge with my datatable that has two columns, "Name" and "Age". After populating the datatable using Ajax, I create a button for each row. The goal is to send the "Name" and "Age" fields of the clicked row to a PHP script, which will then ...

javascriptphpajaxdatatable

Leveraging the power of the useSelector Redux hooks

I have implemented state management in Redux using hooks, but I am struggling with importing and utilizing the state I need. In my Login file, I am trying to use the useSelector hook to access the state: function Login(props) { var classes = useStyles() ...

reactjsreduxreact-reduxreact-hooks

The npm outdated -g command is producing an error message that states "Unable to read the length property of undefined"

I am currently facing an issue while trying to check the version status of my npm installed global packages. When I run the command npm outdated -g --depth=0 in the terminal, I encounter the following error: npm ERR! Cannot read property 'length&apos ...

javascriptnpm

Tips on making a material-ui grid fill up the entire screen

Currently, I am working on developing a layout that resembles most editor/IDE setups using material-ui and react. In this layout, I have a top bar, a bottom bar, side panels on both sides, and a center area. My main concern is how to ensure that this grid ...

htmlcssreactjsmaterial-ui

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

javascripthtmlcss

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

I have recently coded an HTML page in order to gain a better understanding of how element removal functions. Code: <html> <head> <script> var childDiv = null; var parent1 = null; var parent2 = null; function ...

javascripthtml