Next.js Discord

Discord Forum

pass a variable from a /page to a page [id]/page.tsx

Unanswered
SahLozk posted this in #help-forum
Open in Discord
SahLozkOP
I have a problem, I can't pass a variable from a /page to a page [id]/page.tsx

Can somebody help me please

39 Replies

SahLozkOP
please ?
SahLozkOP
"use client"
import { useState, useEffect } from "react";
import { ExcelDataFourniture } from "../types/db";
import Link from "next/link";

const Fournitures: React.FC = () => {
  const [ateliers, setAteliers] = useState<ExcelDataFourniture[]>([]);

  useEffect(() => {
    const fetchAteliers = async () => {
      try {
        const response = await fetch("http://localhost:3001/api/fourniture/unique-values");
        const data = await response.json();
        setAteliers(data);
      } catch (error) {
        console.error("Erreur lors de la récupération des ateliers:", error);
      }
    };

    fetchAteliers();
  }, []);

  return (
    <div className="my-10">
      {ateliers.map((atelier, index) => (
        <div key={index}>
          <Link href={`/fournitures/${atelier.Atelier}`}>{atelier.Atelier}</Link>
        </div>
      ))}
    </div>
  );
};

export default Fournitures;
"use client"
import { useState, useEffect } from 'react';

const FournitureDetailPage: React.FC<{ Atelier: string }> = ({ Atelier }) => {
  const [articles, setArticles] = useState<any[]>([]);

  useEffect(() => {
    const fetchArticles = async () => {
      try {
      console.log(Atelier);
        const response = await fetch(`http://localhost:3001/api/fourniture/${Atelier}`);
        if (!response.ok) {
          throw new Error("Error fetching articles");
        }
        const data = await response.json();
        setArticles(data);
 
      } catch (error) {
        console.error("Error fetching articles:", error);

      }
    };

    fetchArticles();
  }, [Atelier]);

  return (
    <div>
      <h1>Articles for workshop {Atelier}</h1>
      {articles.length === 0 ? (
        <p>No articles found for this workshop.</p>
      ) : (
        <ul>
          {articles.map((article, index) => (
            <li key={index}>
              {article.Article} - {article.Designation}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default FournitureDetailPage;
I can't pass the Workshop variable in the details page in order to use it in the fetch fetch(http://localhost:3001/api/fourniture/${Atelier});
Giant panda
what's your folder structure
SahLozkOP
app
-fournitures/page.tsx
-fournitures/[atelier]/page.tsx
Giant panda
if your goal is to receive dynamic key then u can use useParams hook
SahLozkOP
how to do this ?
Giant panda
const { id: Atelier } = useParams();
SahLozkOP
Isn't it better to get a prop?
Giant panda
yes then u need to switch to server components and do the fetching stuff directly in the server component instead of route handlers
SahLozkOP
so I have to make a component instead of [atelier]/page.ts
Giant panda
no folder structure will be same as before
SahLozkOP
can you show me how to do it please?
SahLozkOP
I can't figure out how to do it
// ...
 
async function Playlists({ artistID }: { artistID: string }) {
  // Wait for the playlists
  const playlists = await getArtistPlaylists(artistID)
 
  return (
    <ul>
      {playlists.map((playlist) => (
        <li key={playlist.id}>{playlist.name}</li>
      ))}
    </ul>
  )
}
 
export default async function Page({
  params: { username },
}: {
  params: { username: string }
}) {
  // Wait for the artist
  const artist = await getArtist(username)
 
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Playlists artistID={artist.id} />
      </Suspense>
    </>
  )
}
similar example like your
SahLozkOP
I have a lot of things to change ^^
Munchkin
Hmm sound like you technically also get away with usecontext?? depends on how much you want to send over tho..
Not sure if this is the correct way to go so i hope someone verifies this for me
Giant panda
?
Munchkin
Well with useContext you can make a global variable and then have the child script look out for any changes made in that variable.
then if it does you can activate the rest of the script
Giant panda
Why would you require the Context API when the data is already local to the component?
:galactic_brain:
Munchkin
just another way of doing it i suppose..
Giant panda
wrong way I'd say
Munchkin
yeah fair. Im using it for my own project which handles a global variable for saving etc. again different use than this.
SahLozkOP
if you can give me an example with my code that would be better, because I always have problems xD @Giant panda
Giant panda
I already gave you lol
SahLozkOP
Can you modify my code so that I can see and understand better? please
SahLozkOP
"use client"
import { useState, useEffect } from "react";
import { ExcelDataFourniture } from "../types/db";
import Link from "next/link";

const Fournitures: React.FC = () => {
  const [ateliers, setAteliers] = useState<ExcelDataFourniture[]>([]);

  useEffect(() => {
    const fetchAteliers = async () => {
      try {
        const response = await fetch("http://localhost:3001/api/fourniture/unique-values");
        const data = await response.json();
        setAteliers(data);
      } catch (error) {
        console.error("Erreur lors de la récupération des ateliers:", error);
      }
    };

    fetchAteliers();
  }, []);

  return (
    <div className="my-10">
      {ateliers.map((atelier, index) => (
        <div key={index}>
          <Link href={`/fournitures/${atelier.Atelier}`}>{atelier.Atelier}</Link>
        </div>
      ))}
    </div>
  );
};

export default Fournitures;
"use client"
// FournitureDetailPage.tsx
import { useState, useEffect } from 'react';

const FournitureDetailPage: React.FC<{ Atelier: string }> = ({ Atelier }) => {
  const [articles, setArticles] = useState<any[]>([]);
console.log(Atelier);
  useEffect(() => {
    const fetchArticles = async () => {
      try {
        console.log(Atelier);
        const response = await fetch(`http://localhost:3001/api/fourniture/${Atelier}`);
        if (!response.ok) {
          throw new Error("Error fetching articles");
        }
        const data = await response.json();
        setArticles(data);
 
      } catch (error) {
        console.error("Error fetching articles:", error);
      }
    };

    fetchArticles();
  }, [Atelier]);

  return (
    <div>
      <h1>Articles for workshop {Atelier}</h1>
      {articles.length === 0 ? (
        <p>No articles found for this workshop.</p>
      ) : (
        <ul>
          {articles.map((article, index) => (
            <li key={index}>
              {article.Article} - {article.Designation}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default FournitureDetailPage;
Siberian Rubythroat
Also its bad way to fetch data like that
You may use SSR
If you want I may help you with that in discord call