gallery.js | dependence library for creating image infinite | Animation library

I am building a gallery where you click on the image and it will load in a separate component using props, this image is a URL, taken from a hard-coded array, where the src is loaded as a background image via CSS. My challenge is connecting the data to that component. I have tried connecting the data from parent to child with callbacks, but no luck. I think what I am trying to do is connect components sideways, and I don't want to use redux, as I am not familiar.

Note: I am aware you can just load the image in GalleryContainer.js using window.location.href = "props.src/", however, I want the image to load in the Image component that will act as a container to hold the image giving the user other options such as downloading the image, etc...

Note: I have tried importing the Image component in Gallery.js and rendering it like so: , and I find the data connects just fine, but this does not help keep the component separate.

What I have already : I have a route in app.js that allows me to go to the image route path just fine it’s loading in the url from props.src in the image component that is my challenge

UPDATE: SOLVED Click here to see the solution!

Here is the code:

GalleryList.js

I have problems with URL Processing in Laravel mix.

here is my app.css

I am currently working on a webpage and tried implementing LightGallery. Although the image galleries work totally fine for me the videos won't seem to play. When I check the console the following error message is displayed upon loading the site:

I am trying to display images for an art gallery. I have one MainGallery component and within said Component is a Piece Component being rendered for each object in a helper file portfolio.js

The Piece Component is rendering for each object and I have access to the data from objects but the image path isn'y displaying images even though the file paths are correct.

I am trying to setup a React JSFiddle to include react-image-gallery.

Using UNPKG i've successfully linked to the package:

https://unpkg.com/browse/react-image-gallery@1.0.8/

I'm still stuck on the following:

1. I think i should be referencing a .js file in the package but it isn't clear which one?
2. In the fiddle, should i use the resources option, or, should i include a tag?

HTML is:

I'm working on a site where I have a gallery and custom build lightbox. Currently, I'm querying my data with a page query, however, I also use them in other components to display the right images and changing states. It is easier for me to store states in Context API as my data flow both-ways (I need global state) and to avoid props drilling as well.

I've setup my context.provider in gatsby-ssr.js and gatsby-browser.js like this:

I'd need a bit of advice with gatsby-image. I'm building a gallery with a custom lightbox.

Query:

I am trying to filter a collection from Mongo Atlas with string properties: names and urls.

I am then trying to save that filtered value, store and retrieve from Mongo, and send it back to another component.

I am getting a 500 internal server error. I have tried to target the filtered name of the array, I am only returning the full array and not the result of the filter. I have added a name property to my express server and all seems to work fine.

My goal is to use the filter water to display the image that matches and use that value in another component to, then again filter and access the matching image.

I am successful in returning the filtered name in the names array map function which displays name:waterfall

Also, I tried commenting out setName(response.data.name);, but it returns: TypeError: Cannot read property 'filter' of undefined when save button is clicked.

Gallery.js React

I am trying to associate two database tables, but I do not know exactly where to add the code in my configuration:

config.js