2

How can I pass map items (title, category and images) in my id.jsx file.

Basically, I just want to create a single page for my projects. But I can only access post ID. I don't know how to pass other data items.

'Projects folder'

[id].js

import { useRouter } from "next/router";

const Details = () => {
  const router = useRouter();
  return <div>Post #{router.query.id}

// Single Project Title = {project.title} (like this)

</div>;
};

export default Details;

index.js

import { MyProjects } from "./MyProjects";

const Projects = () => {
  const [projects, setProjects] = useState(MyProjects);

 {projects.map((project) => (
          <Link
            href={"/projects/" + project.id}
            key={project.id}
            passHref={true}
          >
            <div className="project__item">
              <div className="project__image">
                <Image src={project.image} alt="project" />
              </div>
              <div className="project_info">
                <h5>{project.category}</h5>
                <h3>{project.title}</h3>
              </div>
            </div>
          </Link>
        ))}
1
  • By creating [id].js, you're creating another page. You may be interested in extracting a component in which you can pass multiple values as props. Since you say you want a single page, you shouldn't be creating another file in pages/. Apr 2, 2022 at 0:45

1 Answer 1

2

If I understand your question correctly, you want to send some "state" along with the route transition. This can be accomplished using an href object with the "state" on the query property, and the as prop to hide the query string.

Example:

{projects.map((project) => (
  <Link
    key={project.id}
    href={{
      pathname: "/projects/" + project.id,
      query: {
        id: project.id,
        category: project.category,
        title: project.title
      }
    }}
    passHref={true}
    as={"/projects/" + project.id}
  >
    <div className="project__item">
      <div className="project__image">
        <Image src={project.image} alt="project" />
      </div>
      <div className="project_info">
        <h5>{project.category}</h5>
        <h3>{project.title}</h3>
      </div>
    </div>
  </Link>
))}

...

const Details = () => {
  const router = useRouter();
  return (
    <div>
      <div>Post #{router.query.id}</div>
      <div>Title {router.query.title}</div>
      <div>Category {router.query.category}</div>
    </div>
  );
};
3
  • Thank you, Drew! If I get a job someday, It's bcoz of you. Apr 2, 2022 at 8:32
  • But when I refresh the ID.js page, all that passed states goes away. How can I keep it? Apr 2, 2022 at 11:46
  • @JuliaSchafer Route state is generally very transient, i.e. it only exists during the route transition from sender to receiver. If you refresh the page on the receiver side, the sender doesn't resend the data. If the receiver needs to it can persist the passed state to local state and in the case of page reloads, longer term storage like localStorage. The receiving component would need to manage this.
    – Drew Reese
    Apr 4, 2022 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.