0
149
VistasReact Router Dom Dynamic linking gives wrong data
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>
);
}´´´
3 Respuestas
Responde la pregunta0
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.
0
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]);
0
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]"