React Router Dom Dynamic linking gives wrong data-CodePudding

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>
  );
}´´´

CodePudding user response：

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.

CodePudding user response：

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]);