Having a problem loading in data to child component in react

Question

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: <Image src={props.src} id={props.id}/>, 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

import Gallery from "./Gallery";
import Header from "./UI/Header";
import Footer from "./UI/Footer";

import styles from "./Gallery.module.css";

const DUMMY_IMAGES = [
  {
    id: "img1",
    src: "https://photos.smugmug.com/photos/i-vbN8fNz/1/X3/i-vbN8fNz-X3.jpg",
  },
  {
    id: "img2",
    src: "https://photos.smugmug.com/photos/i-fSkvQJS/1/X3/i-fSkvQJS-X3.jpg",
  },
  {
    id: "img3",
    src: "https://photos.smugmug.com/photos/i-pS99jb4/0/X3/i-pS99jb4-X3.jpg",
  },
];

const GalleryList = () => {
  const imagesList = DUMMY_IMAGES.map((image) => (
    <Gallery id={image.id} key={image.id} src={image.src} />
  ));

  return (
    <>
      <Header />
      <ul className={styles.wrapper}>
        <li className={styles.list}>{imagesList}</li>
      </ul>
      <a href="/">Home</a>
      <Footer />
    </>
  );
};

export default GalleryList;

Gallery.js

import GalleryConatiner from "./UI/GalleryContainer";

import styles from "./Gallery.module.css";

const Gallery = (props) => {
  return (
    <>
      <div className={styles["gal-warp"]}>
        <GalleryConatiner id={props.id} key={props.id} src={props.src} />
      </div>
    </>
  );
};

export default Gallery;

GalleryContainer.js

import styles from "../Gallery.module.css";

const GalleryConatiner = (props) => {
  const selectedImg = () => {
    if (props.id) {
      // window.location.href = `image/${props.src}`;
      window.location.href = "image/"
    }
  };
  return (
    <ul>
      <li className={styles["gallery-list"]}>
        <div
          onClick={selectedImg}
          className={styles["div-gallery"]}
          style={{
            backgroundImage: `url(${props.src}`,
            height: 250,
            backgroundSize: "cover",
          }}
        ></div>
      </li>
    </ul>
  );
};
export default GalleryConatiner;

Image.js

import styles from "./Image.module.css";

const Image = (props) => {
  return (
    <section>
      <h1 className={styles["h1-wrapper"]}>Image:{props.id}</h1>
      <div className={styles.wrapper}>
        <div
          className={styles["image-container"]}
          style={{
            backgroundImage: `url(${props.src}`,
          }}
        ></div>
      </div>
    </section>
  );
};

export default Image;

Answer 1

You should be able to use the router Link to pass data via "state" on the to property.

From React Router's documentation:

<Link
  to={{
    pathname: "/images",
    state: { imgUrl: props.src }
  }}
/>