Is it possible to access another jsx components api data from a different jsx file?

I built a product page using useEffect to get information from an API, and then mapping

 useEffect(() => {
    fetch("/api/artProducts.json")
      .then((response) => response.json())
      .then((data) => setArt(data));
  }, []); 

          <div id="allList" className={`artList${category.category_id}`}>
            {category.art.map((art) => (
              <div key={art.art_id}>
                <div>
                  <h3>{art.name}</h3>
                  <img
                    src={art.image}
                    alt=""
                    onClick={() => getImg(art.image)}
                  />
                  <NavLink to={`/art-details/${art.art_id}`}>
                    <button type="button">order now!</button>
                  </NavLink>
                </div>
                <p>
                  price{" "}
                  <span>{String(art.price).replace(".", ",")}€</span>
                </p>
              </div>
            ))}
          </div>

but I want to create a product details page with more information and I'm stuck on how to connect the two.

I have researched a lot of solutions, this is what I tried to do but all I get is a blank page.

export default function ProductPage(props) {
  const [artDetails, setArtDetails] = useState([]);

  useEffect(() => {
    getResponse();
  }, []);

  const getResponse = async () => {
    const res = await fetch(`/api/galeria.json/${props.art.art_id}`).then(
      (res) => res.json()
    );

    setArtDetails(await res);
  };

  return (
    <section>
      <div>
        <h2>{artDetails.art.name}</h2>
      </div>
    </section>
  );
}

On the first page, you're fetching /api/artProducts.json which seems to be an actual JSON file the server is returning. Unless they literally named the route /api/artProducts.json which I doubt.

So then it seems very likely you're formatting your request to the backend server wrong. This is not a standard way of formatting an API route request:

/api/galeria.json/${props.art.art_id}

You need to create some sort of API route that simply handles taking the art_id as a parameter, then perform some backend logic to return only the results from galeria.json that are related to your art_id.

An example express route:

app.post('/api/galeria/:art_id', (req, res) => { ... });

Then within the Express handler you access art_id using req.params.art_id.

Or if you simply want to return all the results from /api/galeria.json, you can filter the results on the frontend using the art_id. Something along the lines of:

const galeriaJSON = [
  { art_id: 1, text: 'hello darkness my old friend' },
  { art_id: 2, text: 'hello world' }
];

const filteredResults = galeriaJSON.filter((row) => {
  return row.art_id === props.art.art_id;
});