i’m working on a React web app. I would like to render a component from an onClick. So a user looking through profiles should be able to click on a profile and that directs them to the profile/portfolio page. The profiles are mapped through and the onClick is in a map. The code doesn’t work though, the profile
prop that’s passed down is undefined. profiles
and profile
information is pulled from Firestore.
Page With Multiple Profiles
return (
<div>
{profiles.map((profile) => {
const portfolioShow = (profile) => {
console.log("Portfolio Show: ", profile.user);
navigate(`/portfolio/${profile.user}`);
return <Portfolio profile={profile} />;
};
return (
<div
key={profile.user}
onClick={() => portfolioShow(profile)}
>
// Components that show different profiles.
</div>
)
The Portfolio Show
console log works and it prints the profile.user
.
The Portfolio page:
export default function Portfolio({ profile }) {
useEffect(() => {
console.log("Profile: ", profile);
}, [publish, profile]);
return (
<>
// portfolio and profile components
</>
);
}
The profile
prop that’s passed down is undefined.
Any assistance would be appreciated.