React Router Dom Dynamic linking gives wrong data

Question

I'm trying to make a dynamic project page using react router dom v6, using params gives the right id in console, but the project displayed is wrong, heres an example:

The "id: 7" is the project one and wrong, but the "6" below is the params id which is the correct one.

Here's the project page code:

export function ProjectPage() {
  const {projectId} = useParams();
  const project = filterData[projectId]
  const {title, mediaUrl} = project;
  console.log(project, projectId)

  return (
    <div className={"project-page-body"}>
      <div className={"project-page-title"}>
        <h1 className={"project-item-title"}>{title}</h1>
        <p className={"description"}>
          Lorem ipsum filler text for project description.
        </p>
      </div>
      <div className={"project-page-image"}>
          <img src={mediaUrl} style={{width: "80vw", height: "auto" }}/>
      </div>
    </div>
  );
}´´´

Answer 1

For future notices, the solution was turning projectId into an integer.

Here's the working code:

 const { projectId } = useParams();
  const [project, setProject] = useState();

  useEffect(() => {
    setProject(
      filterData.find((project) => project.id === parseInt(projectId))
    );
  }, [projectId]);

Answer 2

Id(not paramsId) is a number type but paramsId(not Id) is a string type. You passed projectId, which is a string type, so you need to convert projectId to string type using toString() method.

Answer 3

Here you have done "const project = filterData[projectId]" which means projectId will act as index fot filterData array.So as index always starts from 0 so the next project is displayed.

So you can make it as "const project = filterData[projectId-1]"